Html 如何使用flexbox强制划分为相等的部分

在这样的dom结构中：

<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>

id为2和4的div将均匀分布，只要id为3和5的内容宽度之和不超过id为1的dom的宽度

当总和超过宽度时，它们的分布不均匀，内容较宽的将占据更多的宽度。即使在这种情况下，如何使用flexbox强制2和4占据均匀的宽度

---

我不想按百分比使用宽度规格。我想坚持使用flexbox。

如果希望元素独立于其内容增长或收缩，请指定零：

然而，在Chrome中不正确地工作：无论设置了零基，大图像都会拉伸其父容器。作为解决方法，可以设置最大宽度：

img {
  max-width: 100%;
  height: auto;
}

---

要强制平均分配，您必须将

width:0

添加到所有弹性项中。读了曼努埃尔·马图佐维奇的文章后，我想到了这一点，这篇文章对

flex-grow

的工作原理有一个非常深入的结论

---

首先，

id

以数字开头是无效的：不确定为什么其他答案没有明确地说出来，但这是最重要的答案，在一天结束时解决了我的问题

flex-basis: 0;

img {
  max-width: 100%;
  height: auto;
}