更新innerHTML时Flex元素意外扩容的解决方法及原理疑问

我有如下Flex布局，更新类名为“three”的元素innerHTML时，该元素会意外调整尺寸，导致所有列宽度变化。我希望点击“update”按钮时任何div的宽度都不改变。我发现把.three的flex-grow: 1替换为flex: 1 0 1%可以解决问题，但不理解为什么这个flex-basis设置有效，感觉像是临时方案。

原代码 #

HTML

<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
    <br/>
    <button id="update" onclick="update()">update</button>
  </div>
  <div class="three">
    three
  </div>
  <div class="four">
    four
  </div>
  <div class="five">
    five
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: tomato;
  display: flex;
  height: 100%;
  min-height: 100vh;
  color: #ffffff;
}

.one {
  width: 10%;
  background-color: grey;
  height: auto;
}

.two {
  width: 200px;
  height: 100vh;
  background-color: green;
  display: inline-block;
  position: sticky;
  top: 0;
}

.three {
  background-color: orange;
  flex-grow: 1;
  height: 100vh;
  min-height: 3000px;
}

.four {
  width: 200px;
  overflow-y: hidden;
}

.five {
  width: 10%;
  background-color: dodgerblue;
  height: auto;
}

JavaScript

function update() {
  var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
  document.querySelector(".three").innerHTML = text;
}

问题原因 #

原来的.three只设置了flex-grow:1，此时flex项目的flex-basis默认是auto。flex-basis:auto意味着元素的基准宽度会根据内容自动计算。当你更新.three的内容时，它的内在宽度（由内容撑起来的宽度）会变化，浏览器会重新计算所有flex项目的空间分配：先基于每个元素的flex-basis分配空间，再把剩余空间按flex-grow比例分配。这就导致.three和其他列的宽度都跟着变动。

为什么flex:1 0 1%能解决问题 #

flex是flex-grow flex-shrink flex-basis的简写，flex:1 0 1%的含义是：

• flex-grow:1：保持占据容器剩余空间的能力
• flex-shrink:0：禁止元素在空间不足时缩小（这里不是核心作用，但能避免意外收缩）
• flex-basis:1%：把元素的基准宽度设为容器宽度的1%，这个值会覆盖默认的auto。

关键在于flex-basis:1%：它告诉浏览器，这个元素的基准宽度不由内容决定，而是一个固定的极小比例。这样浏览器在计算空间时，会先给其他固定宽度/百分比的元素（.one、.two、.four、.five）分配好空间，再把剩下的所有空间全部分配给.three。后续更新内容时，因为基准宽度已经固定，不会随内容变化，所以不会触发整体列宽的重新计算。

这不是临时方案，而是符合Flex布局规范的正确用法——当你希望一个flex项目稳定占据剩余空间、不受内容宽度影响时，就需要显式设置非auto的flex-basis。你也可以用flex:1 0 0%，效果基本一致，0%同样能让flex-grow完全控制剩余空间分配，不受内容干扰。

修改后的.three样式 #

.three {
  background-color: orange;
  flex: 1 0 1%; /* 或者 flex: 1 0 0% */
  height: 100vh;
  min-height: 3000px;
}

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