把孩子变成父母

时间:2017-06-29 13:30:00

标签: html css css3 flexbox

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

.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属性来修复它?

1 个答案:

答案 0 :(得分:7)

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

您在文本元素上有white-space: nowrap。因此,所有flex项目祖先都必须扩展(以多米诺骨牌效应)以适应文本的长度。

受影响的弹性项目是:

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

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

  1. min-width: 0添加到弹性项目
  2. 使用overflow以外的任何值添加visible以灵活项目。 (这就是为什么你能够通过添加overflow: hidden来解决问题的原因。它实际上是一个干净有效的解决方案。)
  3. 在这篇文章中更详细地解释了这种行为:

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