css 填充剩余空间_CSS 填充剩余的高度

You would think that such a basic problem would be solved within seconds of try and error or after a small trip to our favorite search engine.

问题： 有个容器，里面有上下两个元素。 上元素的高度固定(但未知)， 想让下元素充满余下的高度。

解决： 用 Flex

HTML:

<div id="outer">
<div id="inner_fixed">
I have a fixed height
</div>
<div id="inner_remaining">
I take up the remaining height
</div>
</div>

CSS:

#outer {display: flex;flex-flow: column;height: 100%;
}
#inner_fixed {height: 100px;background-color: grey;
}
#inner_remaining {background-color: #DDDDDD;flex-grow : 1;
}