一个关于Flex布局的小问题

前言

在使用 Flexbox 布局时，有时我们希望子元素中的文本保持在一行，并在溢出时显示省略号。

然而，如果实现不当，可能会出现布局中断的问题，导致整个 Flex 父元素的宽度被文本撑大，破坏原本的布局。

尽管 Flexbox 是为简化布局而设计的，但在处理长文本时需要特别注意。

幸运的是，有一个标准化的解决方案，可以使用非 Flexbox 特定的 CSS 属性来解决这个问题。

接下来就让我们一起来探索下该解决方案。

问题

问题 1：

flex 子元素内部直接就是文本

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff
  </div>
</div>

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

动画 GIF 显示随着 flex 子元素变窄文本被截断

问题 2

现在 flex 直接子元素内部不是文本了，而是一个 h2 标签。

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

动画 GIF 显示了非换行文本，阻止了 flex 父级变窄

有点令人困惑... 如果文本直接位于 flex 子元素内，则一切正常：当有子元素时就会出现问题；

这是怎么回事呢？

分析问题

在 Flexbox 布局中，子元素默认情况下会尝试根据其内容调整自己的宽度。

如果一个子元素的内容非常长，浏览器会尽量给它足够的空间展示完整内容，这样就可能导致子元素撑开并迫使父元素变得很宽，超出预期布局。

假设一个子元素包含非常长的文本，而这个子元素的默认 min-width 可能不为零。

即使设置了 flex-shrink: 1; 让它可以收缩，但因为 min-width 不是零，子元素可能依然会比预期更宽，从而影响整个布局。

这种行为在 Chrome、Opera 和 Firefox 上都是一致的。Safari 甚至在没有最小宽度的情况下也会缩小/截断。

解决方案

先说结论：在 flex 的直接子元素上添加 min-width: 0; 或者min-width一些实际值；

设置 min-width: 0; 是告诉浏览器，当子元素宽度需要缩小时，它可以缩小到比其内容宽度更小的尺寸，而不必受默认最小宽度的限制。

这意味着，即使子元素内部的文本很长，它也会优先考虑 Flexbox 布局的要求，缩小自己的宽度以适应父元素，而不是强迫父元素变宽。

想象一个装书的盒子（父元素），里面有一本很厚的书（子元素）。

如果我们不对书的最小宽度做任何限制（没有 min-width: 0;），书会展开到它需要的宽度，可能会撑大整个盒子。

如果我们告诉书你可以随意缩小（设置了 min-width: 0;），那么书就会按需缩小，不会强行撑大盒子。

min-width: 0; 的作用就是确保 Flex 子元素在需要时可以尽可能地缩小宽度，以避免撑大父元素，从而保持整个布局的稳定和美观。

通过这个设置，可以更好地控制和优化布局，使其更加符合预期。

.flex-child {
+  min-width: 0;
}

.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}