Question

我有一个flex-container（一个<ul>），其子节点设置为包裹在一列中。我的问题是，一旦孩子们换行，柔性容器的背景就不会延伸到覆盖这些包裹的孩子。这是问题的codepen。

以下是笔中的代码：

＆＃13;

ul {
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  height: 8em;
  /*to force wrapping*/
  background-color: #999;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 3em;
  text-align: center;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>

＆＃13;

编辑：

在我的实际使用案例中，我不知道弹性容器有多高或它将拥有多少个孩子，所以它将包裹在不同的点。

Answer 1

您正在设置display: flex，但没有为孩子设置弹性值。而不是width: 3em，它应该类似flex: 1，取决于您尝试实现的目标。使用display: flex然后在em中定义宽度并不合理。

编辑：不知道为什么它被downvoted，downvoter可以澄清吗？问题的问题将通过正确使用定位来解决（例如，使用flex值而不是设置width）。

当内容物包裹在列中时，Flex容器不会膨胀

编辑：

1 个答案: