If the total content height of the parent is 10,000px but the overflow: auto
element is rendered with a height of 700px how do I force the aside
child element to dynamically render as 10,000px instead of the default 700px? You can see the white background the moment you begin to scroll the Fiddle.
- May not add any more elements (
::after
and::before
are acceptable though). - The
aside
element must have it's content scroll withmain
element's content via the#body
element (noposition: fixed;
). - The
aside
element must have it'sbackground-color
stretch from the very top at 0px to the very bottom (e.g. 5,000px or 10,000px) far below the initial visible fold. - The
aside
element must not have it's ownoverflow: auto;
. - Dynamic (for the lesser knowledged) implies we can not set a static
height
, e.g.height: 10000px
as we will not know what the rendered height will be.
In my example the moment you begin to scroll the green background-color
ends, I want to make the aside
element stretch all the way to the content bottom.
<?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>