html - 让 flex child 不拉伸(stretch)(但在绝对 parent 里面)？

Question

我怎样才能停止<li>拉伸(stretch)元素以填充其 flex 容器的高度？我只想拉伸(stretch)背景，让元素位于框的顶部。

我知道通常你会使用 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 line一个 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>