Aumentar a cor do plano de fundo para a área de estouro
Se o totalaltura do conteúdo do pai é 10.000 px, mas ooverflow: auto elemento éprestados com uma altura de 700px, como forço oaside elemento filho para renderizar dinamicamente como 10.000 pxem vez de do 700px padrão? Você pode ver o fundo branco no momento em que começa a rolaro violino.
::after e::before são aceitáveis).oaside elemento deve ter seu conteúdo rolar commain o conteúdo do elemento através do#body elemento (nãoposition: fixed;)oaside elemento deve ter ébackground-color esticar do topo até 0px até o fundo (por exemplo, 5.000p ou 10.000px)abaixo a dobra visível inicial.oaside elemento não deve ter o seu própriooverflow: auto;.Dinâmico (para quem tem menos conhecimento) implica que podemosnão definir uma estáticaheight, por exemplo.height: 10000px como vamosnão saber qual será a altura renderizada.No meu exemplo, no momento em que você começa a rolar o verdebackground-color termina, eu quero fazer oaside elemento esticar todo o caminho até a parte inferior do conteúdo.
<?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>