包含挡路内容的Flexbox项目溢出Flexbox容器 [英] Flexbox items with block content overflow the flexbox container

问题描述

问题

类似按钮的挡路内容会导致我的弹性项展开并溢出FlexBox容器。

预期行为

在此示例中，按钮应该与用省略号隐藏的按钮文本溢出并排显示。弹性项宽度应该基于兄弟项而不是内容，并留在容器内，在容器更改宽度和添加或删除弹性项时保持响应。另一个警告是，对于我的特定方案，我不能在flex项或按钮父div上使用overflow：Hidden。

这里是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;
}

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

推荐答案

我已经为你们中感兴趣的人提供了答案。然而，我不得不修改我的初始要求。我没有尝试让两个按钮并排显示，而是将其减少到一个按钮。考虑到这一点，这就是答案。这似乎可以跨浏览器工作。

fiddle example of resolution

添加以下样式：

.child {
    width: 1%;
}

.child.button {
    width: 100%;
}

我很想找人解释一下宽度%是怎么回事？它看起来更像是最小宽度的工作方式。

编辑：感谢Michael_B链接到explanation of width relationship in flex items。

这篇关于包含挡路内容的Flexbox项目溢出Flexbox容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！