How can I create this effect with CSS only? - html

Question

So I have HTML that CANNOT be changed whatsoever and I have a certain design that I'm aiming for. And I cannot use JS for this yet.
Just a note too, the container is actually the parent of all the other elements on the screen. However, the reason I drew like that is because that's the look i want, and if possible, as I scroll down the only thing that scrolls is element 3 and 4, and 3 and 1 stay fixed. At the moment the container is a flex box. The CSS that I have doesn't really do what I need it to do, but here it is:
html,
body {
min-height: 100%;
height: 100%;
}
#container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
#intro {
background-color: yellow;
width: 20%;
order: 2;
}
#nav {
background-color: red;
width: 15%;
order: 1;
}
#content {
background-color: blue;
width: 65%;
order: 3
}
article {
order: 4;
}
footer {
background-color: magenta;
}
<div id="container">
<section id="intro">...</section>
<div id="content">...</div>
<aside id="nav">...</aside>
<article>
<li><img src="http://via.placeholder.com/100x100"></li>
<li><img src="http://via.placeholder.com/100x100"></li>
</article>
</div>
<footer>...</footer>

Answer 1

as I scroll down the only thing that scrolls is element 3 and 4
Using position: fixed we can make nav/intro/footer stay while content/article scroll.
The align-items: flex-end; on content/article will keep them right aligned, and flex-grow: 1 on container/content will make them fill the remaining space.
Stack snippet
html {
display: flex; /* IE min-height bug fix */
}
body {
width: 100%; /* using IE bug fix it need a width */
display: flex;
flex-direction: column;
min-height: 100vh; /* instead using precent all over */
margin: 0;
}
#container {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#nav {
position: fixed;
left: 0;
top: 0;
width: 15%;
height: calc(100% - 30px); /* make up for footer */
background-color: red;
}
#intro {
position: fixed;
left: 15%;
top: 0;
width: 20%;
height: calc(100% - 30px); /* make up for footer */
background-color: yellow;
}
#content {
background-color: lightblue;
width: 65%;
flex-grow: 1;
}
article {
margin-bottom: 30px; /* make up for footer */
}
article li {
list-style: none;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
background-color: magenta;
}
<div id="container">
<section id="intro">Intro</section>
<div id="content">
Content along with below article that will scroll and leave "Nav"/"Intro" fixed. <br>
Content along with below article that will scroll and leave "Nav"/"Intro" fixed. <br>
</div>
<aside id="nav">Nav</aside>
<article>
<li><img src="http://via.placeholder.com/100x100"></li>
<li><img src="http://via.placeholder.com/100x100"></li>
</article>
</div>
<footer>Footer</footer>

Answer 2

You are almost there.
Just set the article to have the same width as the #content and set the
justify-content:flex-end on the #container.
#container {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: flex-end;
}
article {
order: 4;
width:65%;
}
html,
body {
min-height: 100%;
height: 100%;
}
#container {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: flex-end;
}
#intro {
background-color: yellow;
width: 20%;
order: 2;
}
#nav {
background-color: red;
width: 15%;
order: 1;
}
#content {
background-color: blue;
width: 65%;
order: 3
}
article {
order: 4;
width: 65%;
background: cyan;
}
footer {
background-color: magenta;
}
<div id="container">
<section id="intro">...</section>
<div id="content">...</div>
<aside id="nav">...</aside>
<article>
<li><img src="http://via.placeholder.com/100x100"></li>
<li><img src="http://via.placeholder.com/100x100"></li>
</article>
</div>
<footer>...</footer>