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，则最小宽度将不起作用。这是代码。

.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;，但没有成功。

此外，我阅读了此说明，但我无能为力。

我是第一次看到这种现象。为什么会这样？有解决办法吗？

谢谢。

Answer 1

问题可能与您认为的min-width无关，因为如果添加边框，您会看到所有元素都没有溢出（由于min-width:0），只有最后一个跨度溢出了< / p>

.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，这意味着您将跨度将其宽度进行拉伸以适合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>

Answer 2

将overflow:hidden添加到.header-container div：

.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;
  overflow: hidden;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;　/* ADD THIS!! */
  min-width: 0;
}

span {
  white-space: nowrap;
}

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

最小宽度在嵌套flexbox上不起作用

2 个答案: