展开元素以填充父容器的剩余区域[重复]

【问题标题】：Expand element to fill remaining area of parent container [duplicate]展开元素以填充父容器的剩余区域[重复]
【发布时间】：2021-04-07 08:41:30
【问题描述】：

我想将一些元素堆叠在一起，扩大它们的宽度以填充它们的容器。然后我想取最后一个元素（在这种情况下是一个无序列表），我希望它向下扩展以填充容器中的剩余空间。容器和包含的元素可能都有一些填充/边距。

我永远找不到一种不需要带有硬编码值的可怕 calc() 表达式来处理填充和元素大小的方法。我觉得这是一件简单的事情，应该工作不费吹灰之力。

<div class="container">
    <input type="text"/>
    <ul>
        <li>Item</li>
    </ul>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这里不确定...

我希望它向下扩展以填满容器中的剩余空间。

对于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>

【讨论】：