html - Flex Basis 行为不符合预期，但最大宽度有效

Question

我实际上找到了解决问题的方法，但想知道为什么我原来的解决方案不起作用。

我有一个简单的 flex 容器，我希望第一个 div 占容器的 30%。我给它一个 30% 的 flex-basis 来尝试实现这一点。这一直有效，直到我的内容超过 30% 的长度。此时，它扩展了 div 使其超过 30%。

我使用 max-width 属性解决了这个问题，这是我在研究之后从另一个问题中发现的，但仍然很困惑为什么 flex-basis 不起作用，并且在使用 flex box 时不希望有 max-width 属性。我读到如果 flex-direction 是 row，flex-basis 应该是 width 的替代品，但事实似乎并非如此。

这是一个 fiddle 和它的CSS: https://jsfiddle.net/jg5nbdgp/12/

.container {
  display:flex;
  flex-direction: row;

  .left {
    flex-basis: 30%;      /* This doesn't work */
    /* max-width: 30%; */ /* This works */

    .box {
      height: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .middle {
    flex-basis: 50%;
  }

  .right {
    flex-basis: 20%;
  }
}

Answer 1

It is because flex box items cannot be smaller than the actual content. This is the default behaviour of flexbox.

将 min-width:0 包含到 .left 类将使 flex-basis 工作。

因此在您的情况下，您的内容宽度大于 flex-basis 值，并且默认情况下 flexbox 行为 flex box 宽度不能小于内容。按照 flexbox 的术语，你的代码实际上已经变成了

.left {
  flex-basis: 30%;
  min-width: auto;
  max-width: auto;
}

所以你必须更新宽度来让 flexbox 克服默认行为。将您的类(class)更新为

.left {
  flex-basis: 30%;
  min-width: 0;
}

在单词顺序中，您可以记住 width 值在 flex-basis 值之前。

JsFiddle:https://jsfiddle.net/gLodw7k1/