让 flex 孩子不要伸展（但在绝对父级内部）？

Question

How can I stop <li> elements from stretching to fill the height of it's flex container? i just want the background to stretch and the items to sit at the top of the box.

I know normally you would use, align-items: flex-start but this fails to work as the parent div is absolutely positioned.

I will need to retain absolute positioning for part of the layout that is unrelated to this question.

 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

Add align-content: flex-start to the ul (to align flex line when you wrap a flexbox, you should use the align-content property) - see demo below:

 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>