含动态内容的Flexbox需保持初始宽度

要解决内容动态变化导致的容器宽度跳动，核心是禁止容器收缩，同时确保内容过长时能正常扩展，具体修改如下：

步骤1：统一盒模型（可选但推荐） #

先给所有元素设置box-sizing: border-box，避免padding、border额外占用宽度，简化计算：

* {
  box-sizing: border-box;
}

步骤2：调整.outer的Flex属性 #

修改.outer的CSS规则，固定初始分配宽度，禁止收缩，同时设置最小宽度适配超长内容：

.outer {
  flex-grow: 1;
  flex-shrink: 0; /* 禁止容器收缩，保持初始由flex-grow分配的宽度 */
  min-width: max-content; /* 内容过长时自动扩展到能容纳内容的最小宽度 */
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

.inner {
  border: 1px solid green;
}

原理说明 #

• flex-shrink: 0：默认flex项的flex-shrink值为1，会随内容变化自动收缩宽度。设置为0后，容器会保持初始由flex-grow:1分配的宽度，不会因为内容变短而收缩。
• min-width: max-content：当内容长度超过容器初始宽度时，容器会自动扩展，避免内容溢出或被截断。

修改后的完整代码 #

<div style="display: flex; flex-wrap: wrap; border: 1px solid black;">
  <div class="outer">
    <div class="inner">
      <p>label 1</p>
      <label>7684433487</label>
    </div>
  </div>
  <div class="outer">
    <div class="inner">
      <p>label 2</p>
      <label>7632423887</label>
    </div>
  </div>
  <div class="outer">
    <div class="inner">
      <p>label 3</p>
      <label id="x">7682342487</label>
    </div>
  </div>
  <div class="outer">
    <div class="inner">
      <p>label 4</p>
      <label>76882353257</label>
    </div>
  </div>
</div>
<button onclick="document.getElementById ('x').innerHTML = '442424244';">change content</button>

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