我想将一些元素堆叠在一起，扩大其宽度以填充其容器。然后，我要获取最后一个元素（在这种情况下为无序列表），并希望它向下扩展以填充容器中的剩余空间。容器和包含的元素可能都具有一些填充/边距。
我永远找不到一种不需要硬编码值的丑陋calc（）表达式来处理填充和元素大小的方法。我觉得这是简单的东西应该只是工作没有任何努力。
<div class="container">
<input type="text"/>
<ul>
<li>Item</li>
</ul>
</div>
不确定这里...
我希望它向下扩展以填充容器中的剩余空间。
对于ul，是否height: 100%在display: flex;容器内可以吗？
*{
box-sizing: border-box;
margin: 0;
}
.container{
width:400px;
height:400px;
border: 1px dotted red;
display: flex;
flex-direction: column;
}
[type='text']{
width: 100%;
}
ul{
background-color: yellow;
height: 100%;
}<div class="container">
<input type="text"/>
<ul>
<li>Item</li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句