如何不使用相对/绝对定位实现容器与同级容器尺寸一致

嘿，我刚好有个超合适的方案能帮你搞定这个需求——完全不用position: relative或position: absolute，代码还比你提到的定位写法简洁太多，布局稳定性也更强！

核心实现思路 #

我们可以利用CSS Flexbox的原生特性，让两个容器自动保持等高+等宽，完全不需要脱离文档流的定位属性。下面是具体代码：

HTML结构

<div class="container-wrapper">
  <div class="on-the-left">
    <!-- 左侧内容，不管内容多少都能和右侧保持尺寸一致 -->
  </div>
  <div class="on-the-right">
    <!-- 右侧内容 -->
  </div>
</div>

CSS样式

.container-wrapper {
  display: flex; /* 把父容器设为Flex容器 */
  gap: 1.5rem; /* 可选：给两个容器加个间距，按需调整 */
}

.on-the-left, .on-the-right {
  flex: 1; /* 让两个容器平分父容器的可用宽度 */
  /* 自动等高：Flex默认的align-items: stretch会让所有子项高度匹配最高的那个 */
}

/* 如果需要内部内容垂直排列或居中，可以给容器加下面的样式 */
.on-the-left, .on-the-right {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  align-items: center; /* 水平居中内容 */
  padding: 1rem;
  border: 1px solid #eee; /* 方便看效果，可去掉 */
}

为什么这个方案更好？ #

• 完全避免了定位带来的文档流脱离问题，布局更稳定，不会出现元素重叠或溢出的情况
• 代码简洁，只需要几行核心样式就能实现需求
• 响应式友好：父容器宽度变化时，两个容器会自动调整尺寸保持一致
• 灵活度高：如果需要调整宽高比例，还可以结合aspect-ratio属性，比如aspect-ratio: 4/3就能让容器保持4:3的比例

如果你的场景有特殊需求（比如需要固定宽度而非平分），也可以把flex: 1换成固定宽度值，比如width: 300px，Flex依然会保证两个容器高度一致哦！

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