父容器宽度充足时分两列，不足时自动变为单列布局实现问题

需求说明 #

需要实现一个组件布局：两组段落（left和right模块）在父容器宽度充足时，以等宽两列并排显示；当父容器宽度不足时，自动切换为上下单列显示。注意父容器并非浏览器窗口，因此媒体查询（media queries）不适用——页面中会同时存在多个不同尺寸的该组件实例。

尝试过的方案及问题 #

1. Float布局方案 #

.container {width:100%;border: 1px solid;margin:0.5rem;}
.left {color:#006; min-width:20rem; width:50%; float:left;}
.right {color:#060; min-width:20rem; width:50%; float:left;}

问题：容器宽度充足时表现正常，但切换为单列后，left和right模块仍固定为20rem宽度，无法填满父容器。

2. 错误的Flex布局方案 #

.container {width:100%;border: 1px solid;margin:0.5rem; display:flex;}
.left {color:#006;flex:max(20rem, 50% - 0.5rem)}
.right {color:#060;flex:max(20rem, 50% - 0.5rem)}

问题：无论父容器宽度如何，始终强制两列各占50%布局，不会自动触发单列切换。

正确的实现方案 #

方案一：Flex布局（推荐） #

利用flex-wrap: wrap实现换行，搭配灵活的flex属性控制子项尺寸：

.container {
  width: 100%;
  border: 1px solid;
  margin: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 可选，添加列之间的间距 */
}
.left, .right {
  flex: 1 1 min(50%, 20rem); /* 核心属性 */
}
.left { color: #006; }
.right { color: #060; }

原理说明：

• flex-wrap: wrap：当子项总宽度超过容器时，自动换行
• flex: 1 1 min(50%, 20rem)：
  • 第一个1：空间充足时，子项会拉伸占满可用空间
  • 第二个1：空间不足时，子项可以收缩
  • min(50%, 20rem)：子项的基础宽度阈值——当容器宽度≥40rem（2*20rem）时，子项各占50%；当容器宽度<40rem时，子项宽度为20rem，此时总宽度超过容器，触发换行变为单列，同时因为flex-grow为1，子项会自动拉伸填满容器宽度。

方案二：Grid布局 #

Grid写法更简洁，通过auto-fit和minmax实现自适应：

.container {
  width: 100%;
  border: 1px solid;
  margin: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 20rem), 1fr));
  gap: 0.5rem; /* 可选列间距 */
}
.left { color: #006; }
.right { color: #060; }

原理说明：

• repeat(auto-fit, minmax(min(50%, 20rem), 1fr))：自动生成适配容器的列数，每列最小宽度取50%和20rem中的较小值，最大宽度为1fr（占满剩余空间）。当容器宽度≥40rem时，生成两列各占50%；宽度不足时，自动合并为单列，填满容器。

对应的HTML结构 #

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>
  <div class="right">
    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
    <p>Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, aenean vulputate eleifend tellus.</p>
  </div>
</div>

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