Question

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

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

观看此video （在开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想总是尊重flex设置; flex size 1：3：4：4）

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

我无法使用overflow-x: hidden。

.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>

Answer 1

Flex项目的自动最小尺寸

您遇到了弹性箱默认设置。

弹性项目不能小于沿主轴的内容大小。

默认值为......

min-width: auto
min-height: auto

...分别用于行方向和列方向的弹性项目。

您可以通过将弹性项目设置为：

来覆盖这些默认值

min-width: 0
min-height: 0
overflow: hidden（或任何其他值，visible除外）

Flexbox规范

4.5. Automatic Minimum Size of Flex Items

为flex项提供更合理的默认最小大小，这个   规范引入了一个新的auto值作为初始值   CSS 2.1中定义的min-width和min-height属性。

关于auto值...

在主轴上overflow为visible的弹性项目上，当在弹性项目的主轴min-size属性上指定时，指定自动最小大小 。否则计算为0。

换句话说：

min-width: auto和min-height: auto默认值仅在overflow为visible时适用。
如果overflow值不是visible，则min-size属性的值为0。
因此，overflow: hidden可以替代min-width: 0和min-height: 0。

和...

最小尺寸算法仅适用于主轴。
例如，行方向容器中的弹性项目默认不会获得min-height: auto。
有关详细说明，请参阅此帖子：
- min-width rendering differently in flex-direction: row and flex-direction: column

您已应用min-width：0并且该项目仍未收缩？

嵌套的Flex容器

如果您在HTML结构的多个级别上处理弹性项目，则可能需要覆盖较高级别的项目的默认min-width: auto / min-height: auto。

基本上，使用min-width: auto的更高级别的展示项可以防止使用min-width: 0缩小嵌套在下面的项目。

示例：

浏览器渲染注释

Chrome与Firefox / Edge

至少从2017年开始，Chrome似乎（1）还原为min-width: 0 / min-height: 0默认值，或者（2）在某些情况下自动应用0默认值基于神秘算法。（这可能是他们所谓的intervention。）因此，许多人看到他们的布局（特别是所需的滚动条）在Chrome中按预期工作，但在Firefox / Edge中却没有。此处详细介绍了此问题：flex-shrink discrepancy between Firefox and Chrome
IE11

如规范中所述，auto和min-width属性的min-height值为“new”。这意味着默认情况下某些浏览器仍可能呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是min-width和{{1}的初始值在CSS 2.1中。 One such browser is IE11.其他浏览器已更新为flexbox spec中定义的较新min-height值。

修订演示

auto

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

jsFiddle

Answer 2

多年来，我发现这对于flex和grid一直困扰着我，所以我建议以下几点：

RuntimeException

，然后在需要时使用* { min-width: 0; min-height: 0; }或min-width: auto。

实际上，还需要增加框大小以使所有布局更加理智：

min-height: auto

有人知道是否有任何奇怪的后果？几年来我没有遇到任何混合使用上述内容的情况。实际上，在任何情况下，我都不会想从内容向外布局到flex / grid，而不是从flex / grid向内布局到内容，而且-如果确实存在，那是很少见的。因此，这感觉像是一个糟糕的默认设置。但是也许我缺少什么？

Answer 3

对于下面的这段代码，添加 width: 100% 解决了我的问题。

.post-cover .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    word-break: break-all;
    z-index: 21;
}
.post-cover .article-page {
    padding: 20px 0;
    margin-bottom: 40px;
    font-size: 0.875em;
    line-height: 2.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;   /* Add this */
}

为什么弹性项目不会缩小内容大小？

3 个答案:

Flex项目的自动最小尺寸

Flexbox规范

您已应用min-width：0并且该项目仍未收缩？

浏览器渲染注释

修订演示