css - 最小宽度不适用于嵌套 Flexbox

Question

此代码具有最小宽度工作。

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

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

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

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>

但是，如果将 align-items: flex-start; 设置为 .header-text，则 min-width 将不起作用。这是代码。

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

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

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;　/* ADD THIS!! */
  min-width: 0;
}

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-direction有效果，并将min-width: 0;更改为min-height: 0;，但是但没有成功。

另外，我阅读了它的规范，但我无能为力。

• https://drafts.csswg.org/css-flexbox/#min-size-opt
• https://drafts.csswg.org/css-flexbox/#align-items-property

我还是第一次见到这种现象。为什么会出现这种情况？有解决办法吗？

谢谢。

Answer 1

问题并不像您想象的那样与 min-width 相关，因为如果添加边框，您将看到所有元素都没有溢出(由于 min-width:0) 并且只有最后一个跨度溢出

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

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;
  border:2px solid blue;
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;
  border:2px solid green;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
  min-width: 0;
  border:2px solid yellow;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border:2px solid;
}

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

因此我们可以简化您的问题，如下所示:

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  border: 2px solid yellow;
  width: 150px;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid;
}

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

为什么align-items会破坏你的代码？很简单，因为初始值为 stretch ，这意味着您的 span 的宽度将被拉伸(stretch)以适合 Flex 容器的宽度(就像执行 width:100% 一样)。通过更改对齐方式，您将不再具有此功能，并且会产生溢出。

要解决此问题，您只需使用 width:100% 即可。主要思想是拥有一个属性，该属性将强制宽度为父元素的全宽度，以便限制元素的宽度，从而省略号将起作用:

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  border: 2px solid yellow;
  width: 150px;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid;
  width:100%;
}

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

以及您的初始代码:

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

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;
  border:2px solid blue;
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;
  border:2px solid green;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
  min-width: 0;
  border:2px solid yellow;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border:2px solid;
  width:100%;
}

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