任意层级嵌套Flex子元素等宽实现：能否用纯CSS支持动态添加？

你的需求完全能通过纯CSS达成——不管是初始的1、2、3，还是后续动态添加的4、5、6，所有元素都能保持相同宽度。

问题根源 #

你当前代码里的flex: 1是flex: 1 1 auto的简写，其中flex-basis: auto会让元素以自身内容的宽度作为基准来分配剩余空间。在嵌套的flex结构下，父容器的宽度层级不同，就会导致子元素的最终宽度出现差异。

解决方案 #

把flex: 1替换成flex: 1 1 0%（或者0px也可以）。flex-basis: 0%会强制元素的基准宽度为0，这样所有子元素都会严格平分父容器的可用空间，不管嵌套多少层，最终每个数字元素的宽度都会完全一致。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
  <div>
    1
  </div>
  <div class="flex">
    <div>
      2
    </div>
    <div class="flex active">
      <div>
        3
      </div>
    </div>
  </div>
</div>
<button>add</button>

<style>
.flex {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  border-left: solid 1px #000;
}

.flex > div {
  flex: 1 1 0%;
}
</style>

<script>
let x = 4;
$("button").on("click", () => {
  $(".active").removeClass("active").append(`
    <div class="flex active">
      <div>
        ${x++}
      </div>
    </div>
  `);
});
</script>

我还把通用的div选择器改成了.flex > div，避免样式意外影响页面其他div元素，让样式作用更精准。

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