具有块内容的 Flexbox 项目溢出 Flexbox 容器

Question

问题

像按钮这样的块内容会导致我的 flex 项目扩展并溢出 flexbox 容器。

预期行为

在此示例中，按钮应保持并排，按钮文本溢出并用省略号隐藏。弹性项目的宽度应该基于兄弟而不是内容，并且在容器内保持响应，因为容器改变宽度和弹性项目被添加或删除。另一个警告是我不能在 flex 项目上使用 overflow:hidden 或我的特定场景的父按钮 div。

这里是 fiddler.

示例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>

例子CSS

div {
  border: 3px solid;
}

.container {
  padding: 10px;
  background-color: yellow;
  display: -webkit-flex;
  display: flex;
}

.child {
  flex: 1 1 auto;
  padding: 10px;
  margin: 10px;
  background-color: #eee;
}

.child.one {
  color: green;
}

.child.two {
  flex: 6 1 auto;
  color: purple;
}

.child.two button {
  display: inline-block;
}

.child.three {
  color: blue;
}

.text {
  text-overflow: ellipsis;
  overflow: hidden;
}

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

Answer 1

我已经为有兴趣的人提出了答案。但是我不得不修改我的初始要求。我没有尝试让两个按钮并排显示，而是将其减少为一个按钮。鉴于此，这就是答案......这似乎适用于各种浏览器。

fiddle example of resolution

添加以下样式：

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

我很想知道有人解释一下宽度 % 是怎么回事？看起来它的行为更像是 min-width 的工作方式。

编辑：感谢 Michael_B 链接到。

具有块内容的 Flexbox 项目溢出 Flexbox 容器

Flexbox items with block content overflow the flexbox container

html

css

overflow

flexbox