为什么弹性项目不会缩小到超过内容大小？-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粉1565327062023-08-28 13:19:46 1楼

我发现多年来 Flex 和 grid 一直困扰着我，所以我提出以下建议：

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

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

事实上，还可以加入框大小以使所有布局更加合理：

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

有人知道是否会产生任何奇怪的后果吗？在混合使用上述方法的几年里我还没有遇到过任何问题。事实上，我想不出任何我想要从内容向外布局到 Flex/Grid 的情况，而不是从 Flex/Grid 向内布局到内容的情况 --- 当然，如果它们存在，它们也是罕见的。所以这感觉像是一个糟糕的默认值。但也许我错过了一些东西？

赞 +0

添加回复