Flex 基础行为不符合预期，但最大宽度有效

Question

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

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

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

这是一个小提琴和随之而来的 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

这是因为弹性框项目不能小于实际内容。这是 flexbox 的默认行为。

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

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

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

所以你必须更新宽度让 flexbox 超过默认行为。将您的课程更新为

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

换句话说，您可以记住width值先于flex-basis值。

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