为什么弹性项目无法缩减至小于内容大小？-PHP中文网问答

我有4个flexbox列，一切都正常，但是当我向一列添加一些文本并将其设置为大字体大小时，由于flex属性，它使得该列比应该更宽。

我尝试使用word-break: break-word，它有所帮助，但是当我将列调整为非常小的宽度时，文本中的字母会被分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。

观看这个视频（在开始时，第一列最小，但是当我调整窗口大小时，它变成了最宽的列。我只想始终遵守flex设置；flex大小为1：3：4：4）

我知道，将字体大小和列填充设置为较小的值会有所帮助...但是还有其他解决方案吗？

我不能使用overflow-x: hidden。

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

全部回复(1)

P粉4404536892023-08-22 12:47:17 1楼

我发现这在过去的几年里对于flex和grid都多次给我带来了麻烦，所以我建议以下操作：

* { min-width: 0; min-height: 0; }

如果需要这种行为，只需使用min-width: auto或min-height: auto。

实际上，还可以加入box-sizing以使所有布局更合理：

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道是否存在任何奇怪的后果吗？在使用上述方法的几年中，我没有遇到任何问题。实际上，我想不出任何情况下我会希望从内容向外布局到flex/grid，而不是从flex/grid向内布局到内容 --- 而且如果这种情况存在，那肯定很少见。所以这感觉像是一个糟糕的默认设置。但也许我漏掉了什么？

赞 +0

添加回复