html - flex 行不展开

Question

我在 flex 列容器中有一个 flex 行，它没有正确扩展到其子项的大小，而是压缩到“适合”在父项中。

HTML

<div class="content">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

CSS

.content {
  display: flex;
  flex-direction: column;
}
ul {
  display: flex;
  flex-direction: row;
}

In this example , 你可以看到 ul 没有占用它需要的空间。

Answer 1

这是一个答案，我不确定这是正确的做法。

float: left; 在 ul 元素上将允许忽略父元素的宽度。但是，由于父容器是一个 flex 容器，因此其子容器的 float 属性将被忽略。因此，应该在 ul 元素周围添加一个 div。

Here是一个工作示例。