如何实现嵌套Flex布局中B2容器的限定范围自适应尺寸？

周五晚啃布局bug确实容易绕晕，太懂这种绕圈圈的感觉了😅。你的问题核心出在B容器的固定width设置和B2的固定宽度上，导致B2没法根据可用空间动态伸缩。下面是具体的修复方案，一步步来：

关键修改点 #

• 调整B容器的flex行为：去掉.B的width: fit-content，让它作为外层flex的item，既能自适应占据剩余空间，又能在B2隐藏时自动收缩到B1的宽度。
• 让B2动态伸缩：去掉B2的固定width:200px，改用flex属性配合min/max-width，实现从内容最小宽度到200px的动态变化。
• 绑定B2的最小宽度到内容：利用min-width: min-content让B2的最小宽度跟随内部B2-content的最小尺寸（100px）。

修复后的完整代码 #

<style>
div {
  box-sizing: border-box;
  height: 100%;
  background-color: aqua;
  border: solid 5px;
}

.container {
  display: flex;
  border: none;
  height: 100px;
  background-color: aquamarine;
  flex-wrap: nowrap; /* 明确禁止换行，保持一行布局 */
}

.A {
  min-width: 100px;
}

.B {
  border: none;
  display: flex;
  /* 让B作为外层flex的可伸缩项：占据剩余空间+空间不足时收缩+初始宽度由内容决定 */
  flex: 1 1 auto;
}

.B1 {
  min-width: 50px;
}

.B2 {
  /* 让B2在B容器内伸缩，占据B1之外的所有可用空间 */
  flex: 1 1 auto;
  /* 最小宽度匹配内部内容的最小尺寸（B2-content的min-width为100px） */
  min-width: min-content;
  max-width: 200px;
  background-color: burlywood;
}

.B2-content {
  height: 50px;
  min-width: 100px;
  width: 100px;
  background-color: red;
}

.C {
  min-width: 100px;
}
</style>

<!-- 正常显示B2的情况 -->
<div class="container">
  <div class="A">A</div>
  <div class="B">
    <div class="B1">B1</div>
    <div class="B2">
      B2
      <div class="B2-content">B2 content</div>
    </div>
  </div>
  <div class="C">C</div>
</div>

<!-- 隐藏B2的情况 -->
<div class="container" style="margin-top:20px;">
  <div class="A">A</div>
  <div class="B">
    <div class="B1">B1</div>
    <!-- B2被隐藏 -->
  </div>
  <div class="C">C</div>
</div>

效果说明 #

• 空间充足时，B2自动扩展到最大宽度200px；空间不足时，收缩到内部内容的最小宽度100px，不会继续压缩。
• 隐藏B2后，B容器会自动收缩到B1的宽度（50px），A、B1、C紧密左对齐，无多余空隙。
• A、B1、C的固定最小宽度完全保留，不会被挤压变形。

内容来源于stack exchange