Html 包含块内容的Flexbox项溢出Flexbox容器

问题

阻止类似按钮的内容会导致我的flex项目展开并溢出flexbox容器

预期行为

在本例中，按钮应与按钮文本并排，并用省略号隐藏。flex项的宽度应基于兄弟项而非内容，并在容器更改宽度和添加或删除flex项时保持在容器内的响应性。另一个警告是，对于我的特定场景，我不能在flex项或buttons父div上使用overflow:hidden

这是你的电话号码

示例Html

<div class="container" style="width: 400px;">

  <div class="child one">
    Child One
    <br>Lorem ipsum
    <br>dolor sit amet
  </div>

  <div class="child two"><div><button class="text">Child Two with a loooooooooooooooooong naaaaaaaaaaaaaaaaaaaaaaaaaaaaaame</button><button>button two</button></div></div>

<div class="child three">Some Text</div></div>

---

编辑：现在，我不再尝试显示多个按钮，而是将要求更改为仅显示一个按钮。如果有人能用多个按钮来解决这个问题，我仍然会感兴趣。

我已经为你们中感兴趣的人想出了答案。然而，我不得不修改我最初的要求。我没有试图让两个按钮并排显示，而是将其缩减为一个按钮。鉴于此，以下是答案。。。这似乎可以跨浏览器工作

添加以下样式：

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

我很想有人解释一下宽度%？看起来它更像是min width的工作原理

---

编辑：感谢Michael_B链接到。

这个问题相对比较复杂，可以从分解为组件中获益。考虑解决小问题的多个问题。唯一简单的办法是取消按钮并排显示的要求。如果有一个解决方案可以让这个需求变得毫无意义，我会全神贯注。我认为问题在于，当按钮的内容很长时，浏览器不知道渲染按钮的宽度，并且没有足够的信息让浏览器自己来计算，所以默认情况下，它会尝试匹配内容。这也是为什么溢出没有得到尊重的原因。这里有一个可能的解决办法。我把包裹着钮扣的div拿下来作弊。谢谢大家，我相信我已经想出了一个解决办法。我怀疑这就是问题所在，但今天没有时间深入探讨你的问题。您遇到了flex项目的最小尺寸算法。关于

width:1%

和

minwidth

之间的关系，您是对的。

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}