让孩子适应父母答案

【问题标题】：Fitting child into parent让孩子适应父母
【发布时间】：2017-06-29 23:50:05
【问题描述】：

我在底部嵌套了带有文本的 flex 元素。顶部元素具有小于文本的固定宽度：

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
}

.header-container {
  display: flex;
  flex: 1;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

我可以通过将overflow: hidden; 应用于所有元素来解决此问题：

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  overflow: hidden;
}

.header-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

但我不太喜欢这种解决方案。

有没有办法只使用 flex 属性来修复它？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

弹性项目的初始设置是min-width: auto。这意味着弹性项目不能短于其内容的宽度。

您在文本元素上有white-space: nowrap。因此，所有弹性项目祖先都必须扩展（在多米诺骨牌效应中）以适应文本的长度。

受影响的弹性项目是：

.list-component
.header-container
.header-text

因此，为了防止文本溢出主容器，您需要覆盖min-width: auto 默认值。 flexbox 规范提供了两种方法来做到这一点：

将min-width: 0 添加到弹性项目
将overflow 与visible 以外的任何值添加到弹性项目。（这就是为什么您能够通过添加 overflow: hidden 来解决问题的原因。这实际上是一个干净有效的解决方案。）

这篇文章更详细地解释了这种行为：

Why doesn't flex item shrink past content size?

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;         /* NEW */
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;         /* NEW */
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;         /* NEW */
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

【讨论】：