使背景颜色延伸到溢出区域
如果父级的总内容高度为10,000px但overflow: auto元素的渲染高度为700px，我如何强制aside子元素动态渲染为10,000px 而不是默认的700px？您可以在开始滚动小提琴时看到白色背景。
可以不添加任何更多的元素（::after和::before是可以接受的，虽然）。
该aside元素必须有它的内容与滚动main通过元素的内容#body元素（无position: fixed;）。
所述aside元件必须有它的background-color从0像素最顶部到最底部拉伸（例如5,000px或10,000px）远低于初始可见的折叠。
该aside元素不能有它自己的overflow: auto;。
动态（对于较小的知识）暗示我们不能设置静态height，例如height: 10000px因为我们不知道渲染高度是什么。
在我的例子中，当你开始滚动绿色background-color结束时，我想让aside元素一直延伸到内容底部。
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Overflow Flex Box Issue</title><style type="text/css">* {border: 0; margin: 0; padding: 0;}aside{
background-color: #afa;
order: 2;
width: 20%;}body{
display: flex;
flex-direction: column;
height: 100%;}body > header{
align-self: stretch;
background-color: #faa;
flex: 0 1 auto;
min-height: 56px;
order: 1;}body > footer{
align-self: auto;
background-color: #aaf;
flex: 0 1 auto;
min-height: 36px;
order: 2;}html {height: 100%;}main{
background-color: #cfc;
order: 1;
width: 80%;}#body{
display: flex;
order: 2;
overflow: auto;}</style></head><body><div id="body"><main><article><p>article</p><p>article</p><p>article</p><div style="height: 10000px;">10,000px</div></article></main><aside><p><aside>, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside></div><header>The body > header element; element 2, order: 1;.</header><footer>The body > footer element; element 3, order: 3;.</footer></body></html>慕侠2389804
湖上湖