Expand element to fill remaining area of parent container

Question

I want to stack some elements on top of one another, expanding their width to fill their container. Then I want to take the last element (in this case an unordered list) and I want it to expand downward to fill the remaining room in the container. The container and the contained elements may all have some padding/margins.

I can never find a way to handle this that doesn't require hideous calc() expressions with hard-coded values to handle padding and element sizes. I feel like this is something simple that should just work without any effort.

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

Answer 1

Not sure here...

I want it to expand downward to fill the remaining room in the container.

For the ul, is height: 100% inside a display: flex; container would be okay?

*{
  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>