css+html：一个竖二栏结构，如何做到上栏不固定高度并且固定在上，下栏自动填充其余高度？

Question

上栏会根据内容增加高度，并且固定在上方，不论怎么滚动都能看见，下栏是内容区，可滚动，如图

如果上栏使用position:fixed固定在上，那中间的设置为height:100%就行了，但是这样做会和图中那样，右侧的滚动条跨过了上栏。（实际情况中这个滚动条会被上遮住住，看不到滚动条上去了，但是它的确是上去了）并且因为上栏不固定高度，下栏的内容不知道该在上方填充一个多高的div

如果上栏不做调整，滚动条则不会跨过上栏，但是下栏就不能使用height:100%了，如果使用100%，下栏就会向下突出，并且最下面的内容会永远看不见（同样也因为不知道上栏高度，下栏的最后不知道该填充一个多高的div）

Answer 1

display:flex
用流式布局
下面的容器设置flex: 1 1 auto
上面的自然即可。