刚好我之前也处理过类似的需求，给你分享几个实用的方案，完全贴合你这种拖动边框改变父块尺寸的场景：

1. CSS容器查询（Container Queries）—— 原生首选 #

这是目前最直接的解决方案，完全不需要JS，就能让子元素精准跟随父容器的尺寸调整样式，是专门为这种场景设计的CSS特性。

使用步骤很简单：

• 先给可拖动的父容器设置container-type: inline-size;（只监听宽度变化，大部分场景够用；如果需要监听高度可以用size），把它变成容器查询的上下文。
• 然后在子元素的样式里用@container规则，写基于父容器尺寸的样式逻辑。

示例代码：

/* 可拖动的父容器 */
.draggable-container {
  container-type: inline-size; /* 开启容器查询上下文 */
  resize: both;
  overflow: auto;
  border: 2px solid #ccc;
  padding: 1rem;
}

/* 子元素的响应式样式：父容器宽度≥500px时的样式 */
@container (min-width: 500px) {
  .content-text {
    font-size: 1.2rem;
    text-align: justify;
  }
}

/* 父容器宽度<500px时的样式 */
@container (max-width: 499px) {
  .content-text {
    font-size: 0.9rem;
    text-align: left;
  }
}

/* 父容器高度≥300px时调整内部块位置 */
@container (min-height: 300px) {
  .inner-box {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
  }
}

拖动父容器边框时，子元素会自动根据父容器的宽高切换样式，完全不需要依赖视口尺寸的媒体查询。

2. CSS相对单位 + clamp() 函数 —— 无断点平滑响应 #

如果你想要更自然的过渡效果（没有生硬的样式切换断点），可以用相对单位配合clamp()函数，让属性值随父容器尺寸平滑变化。

比如动态调整字体大小和内部块宽度：

.draggable-container {
  resize: both;
  overflow: auto;
  border: 2px solid #ccc;
  padding: 1rem;
  width: 400px; /* 初始宽度 */
}

.content-text {
  /* 字体大小在父容器宽300px时为0.8rem，600px时为1.5rem，中间平滑过渡 */
  font-size: clamp(0.8rem, 0.3rem + 0.5vw, 1.5rem);
  /* 也可以结合父容器的百分比定义，更灵活 */
  /* font-size: clamp(0.8rem, 2% + 0.5rem, 1.5rem); */
}

.inner-box {
  /* 内部块宽度在200px到300px之间，随父容器宽度按50%比例自适应 */
  width: clamp(200px, 50%, 300px);
  margin: 0 auto;
}

这种方式的好处是样式变化完全平滑，不会有突然的跳转，适合不需要精准断点的场景。

3. JavaScript监听容器尺寸变化 —— 自定义逻辑更灵活 #

如果需要实现CSS搞不定的复杂逻辑（比如根据尺寸计算特殊布局、动态修改DOM结构等），可以用JS的ResizeObserver API来监听父容器的尺寸变化，它比传统的window.resize精准得多，只会监听目标元素的尺寸变化。

示例代码：

// 获取元素
const container = document.querySelector('.draggable-container');
const contentText = document.querySelector('.content-text');
const innerBox = document.querySelector('.inner-box');

// 创建尺寸观察器
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    
    // 根据父容器宽度调整字体大小
    if (width >= 500) {
      contentText.style.fontSize = '1.2rem';
    } else if (width >= 300) {
      contentText.style.fontSize = '1rem';
    } else {
      contentText.style.fontSize = '0.8rem';
    }
    
    // 根据父容器高度调整内部块位置
    if (height >= 400) {
      innerBox.style.position = 'absolute';
      innerBox.style.bottom = '1rem';
      innerBox.style.right = '1rem';
    } else {
      innerBox.style.position = 'static';
      innerBox.style.marginTop = '1rem';
    }
  });
});

// 开始监听父容器
resizeObserver.observe(container);

// 注意：组件销毁时记得停止监听，避免内存泄漏
// resizeObserver.unobserve(container);

这种方法的优势是自由度极高，能实现各种复杂的自定义逻辑，适合CSS解决不了的场景。

4. CSS Grid/Flexbox 相对布局 —— 基础布局适配 #

对于内部块的位置调整，也可以直接用Grid或Flex的原生相对布局属性，让子元素自动适应父容器的尺寸，不需要额外的查询或JS。

比如用Flex实现内部块的自适应分布：

.draggable-container {
  resize: both;
  overflow: auto;
  border: 2px solid #ccc;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让内部块自动分布在容器上下 */
  min-height: 200px;
}

.inner-box {
  align-self: flex-end; /* 内部块靠右对齐 */
  width: 50%; /* 宽度占父容器的一半 */
}

当父容器高度变化时，justify-content: space-between会自动调整子元素的间距；宽度变化时，width:50%也会跟着缩放，简单高效，适合基础的布局适配需求。

内容的提问来源于stack exchange，提问作者hofshteyn