让灵活的孩子不要伸展（而是在绝对的父母里面）？

Question

如何阻止<li>元素拉伸以填充其flex容器的高度？我只想拉伸背景，将物品放在盒子的顶部。

我通常知道您会使用align-items: flex-start，但是由于父div的位置绝对正确，因此无法正常工作。

对于与该问题无关的部分布局，我将需要保留绝对位置。

div {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ul {
  align-items: flex-start;
  background: gold;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

li {
  flex-basis: 50%;
}

<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>

Answer 1

将align-content: flex-start添加到ul中（要对齐 flex线，当您包装一个flexbox时，您应该使用align-content属性）-参见下面的演示：

div {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ul {
  align-items: flex-start;
  background: gold;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  align-content: flex-start; /* added */
}

li {
  flex-basis: 50%;
}

<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>