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

Posted 2023-03-05

【中文标题】具有块内容的 Flexbox 项目溢出 flexbox 容器

【英文标题】：Flexbox items with block content overflow the flexbox container

【发布时间】：2016-10-01 05:59:34

【问题描述】：

问题

像按钮这样的块内容会导致我的弹性项目展开并溢出弹性盒容器。

预期行为

在此示例中，按钮应与按钮文本溢出并排并排，并用省略号隐藏。弹性项目的宽度应该基于兄弟而不是内容，并保持在容器内，在容器更改宽度和添加或删除弹性项目时保持响应。另一个需要注意的是，对于我的特定场景，我不能在弹性项目或按钮父 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;

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

【问题讨论】：

这个问题比较复杂，分解成组件可能会有好处。考虑解决较小问题的多个问题。

唯一更简单的方法是取消按钮并排显示的要求。如果有解决方案使该要求变得毫无意义，我会全力以赴。

我认为问题在于，当按钮的内容很长时，浏览器不知道将按钮呈现在什么宽度上，并且没有足够的信息让浏览器弄清楚本身，所以它默认尝试适应内容。这也是为什么溢出不被尊重的原因。这是一个可能的解决方案。我通过删除包裹按钮的 div 来作弊。 jsfiddle.net/y2eqmjsz/16

谢谢大家，我相信我已经想出了一个解决方案。发布在下面。

【参考方案1】：

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

fiddle example of resolution

添加以下样式：

.child 
    width: 1%;


.child.button 
    width: 100%;

我很想有人解释一下宽度 % 是怎么回事？似乎它的行为更像是 min-width 可能的工作方式。

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

【讨论】：

我怀疑这是问题所在，但今天没有时间深入研究您的问题。您遇到了弹性项目的最小尺寸算法。你对width: 1% 和min-width 之间的关系是正确的。 ***.com/a/36247448/3597276