Sidebar with sticky elements at top and footer fixed at bottom - html

I am trying to make a website layout with a header, sidebar, and main body. The main layout is a CSS grid. The sidebar has two elements in it:
The first (.sidebar .container .top) is a navigation area that is sticky, i.e. remains pinned to the top-left of the viewport when the user scrolls past the header.
The second (.sidebar .container .bottom) is a footer that should always be in the bottom left of the viewport.
In my code, the sticky navigation area works as intended, but I cannot get the .bottom element to do what I want:
If I set .sidebar .container to have height 100vh (as I have done below), then the sidebar behaves correctly once you scroll down, but when the page loads, the .bottom text is partially cut off.
If I set .sidebar .container to have height 100%, it stretches to match the length of the body text and the .bottom element isn't visible until you scroll all the way down.
I cannot use .bottom { position: fixed; } because this resets the width of .bottom, but I want the width to respond dynamically (note the use of fr units and max-width in the body styling).
How can I get the text at the bottom of the sidebar to float to the bottom of the viewport?
Here is my code (pardon the long lorem ipsum—it is necessary to show the scrolling behavior):
body {
display: grid;
grid-template-columns: 1fr 5fr;
max-width: 800px;
}
header {
grid-column: 1 / 3;
background-color: aqua;
}
.sidebar {
background-color: greenyellow;
}
.sidebar .container {
position: sticky;
top: 0;
height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
main {
background-color: lightcoral;
}
<header>
<h1>Page title</h1>
</header>
<div class="sidebar">
<div class="container">
<div class="top">This is the main sidebar text. It should be in the top left of the sidebar. The sidebar itself should run from the bottom of the header to the bottom of the, and once the user scrolls past the header, the sidebar should take up the full height of
the page.</div>
<div class="bottom">This is some secondary sidebar text. It should always be at the bottom left of the viewport. However, it is partially hidden from view when the page loads because the header pushes it below the viewport.</div>
</div>
</div>
<main>
<h1>
Body text
</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
</main>
Here is how it is cut off


I added this css to the bottom class:
.bottom {
bottom: 0;
position: sticky;
}
No part of this element will be below the viewport.

Related

Overflow behaving strangely inside css grid

When I try to do an overflow inside of a portion of a css grid I can't get it to behave normally. I have a code pen here https://codepen.io/chrisgrim/pen/WNpMeev
I am trying to get the body div to be the normal width of the screen and only have the table div inside of it use a scroll bar. Instead the entire body div, including the second-nav div inside is going off the side of the screen.
.grid {
display: grid;
grid-template-columns: 4rem auto;
width:100vw;
}
.body {
background:red;
width:100%;
height:100vh;
}
.second-nav {
width:100%;
background:blue;
height:4rem;
text-align:right;
color:white;
}
.table {
width:100%;
background:green;
height:100%;
overflow:auto;
}
.wide-item {
width:120rem;
height:4rem;
background:purple;
}

You have to give a fix height for the table class for scroll to work
.body {
background:red;
}
.grid {
display: grid;
}
.second-nav {
width:100%;
background:blue;
height:4rem;
text-align:right;
color:white;
}
.table {
background:green;
overflow:auto;
height:100px
}
.wide-item {
background:purple;
}
<div class="grid">
<div class="nav">
<div class="nav-item">
nav
</div>
</div>
<div class="main">
<div class="body">
<div class="second-nav">
<div class="second-nav-item">second nav</div>
</div>
<div class="table">
<div class="wide-item">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea beatae consequatur et iure porro quisquam ipsa perferendis, dignissimos dicta quibusdam rerum modi facere. Quasi tempora ratione provident enim incidunt quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam necessitatibus, nihil sunt placeat obcaecati totam. Expedita vitae eligendi tenetur quia iure! Ullam iste dignissimos libero explicabo ex? Culpa, maiores quae.
</div>
</div>
</div>
</div>

CSS: Add spacing from fixed position item

I have a fixed-position element (red bar in this case) at top of the viewport. This element is positioned fixed so as it make it non-scrollable as required. It can have a dynamic height.
<div class="bar" id="bar">
</div>
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
Below that element, there is a button that will toggle the red bar element's visibility. This button should have a top space/ margin of a specific amount say 10px from the red bar when the red bar is displayed and the top space of 10px should be there from the window when the red bar is hidden.
This button should be scrollable.
<div class="btn-wrapper">
<button onclick="toggleBar()">Toggle Bar</button>
</div>
.btn-wrapper {
margin-top: 10px;
}
Below the above button, there is a logo, which should have the same consistent space from the window top whether the red bar is present or not. The logo should be scrollable.
I have almost achieved these requirements except for one thing. I am not able to shift the button down when the red bar is present with the required margin as the red bar is positioned fixed. How this can be achieved?
Here is the codepen
I have added the requirements comments in the codepen's HTML for the elements as well.
Note: The codepen/code which I have provided is for demo purposes. I am working on this for a React app and would prefer a pure CSS way for styling instead of JavaScript if possible.

You should to change margin-top as you're doing display block/none.
Just id to button:
<button id="button" onclick="toggleBar()">Toggle Bar</button>
and slightly modify javascript:
const bar = document.getElementById("bar");
const button = document.getElementById("button");
bar.style.display = "none";
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
button.style.marginTop = "10px";
} else {
bar.style.display = "none";
button.style.marginTop = "0px";
}
}
Working codepen

use getBoundingClientRect().height
apply to your 1st element
button.style.marginTop = bar.getBoundingClientRect().height+'px';
Your code should
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
} else {
bar.style.display = "none";
}
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}
toggle simplified
bar.style.display=bar.style.display==='none'?'block':'none';
simplified code:
function toggleBar() {
bar.style.display=bar.style.display==='none'?'block':'none';
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}

The requirements are:
to move the button down 20px when the bar is showing without moving
anything else
to toggle the bar from display block to display none on alternate clicks of the button
There are two things that help here:
making use of the JS toggle function on an element's classList
CSS transform translate which will move an element without altering the layout of anything else
The JS is reduced to:
function toggleBar() {
document.body.classList.toggle("hidebar");
}
and the CSS has this added:
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
You can use a different ancestor which is common to both bar and button if you prefer. body is just easy to use.
function toggleBar() {
document.body.classList.toggle("hidebar");
}
body {
padding: 0;
margin: 0;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.btn-wrapper {
margin-top: 10px;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
<!--
This bar should appear/hide conditionally on click Toggle Bar button.
It will be always on top and not scrollable
-->
<div class="bar" id="bar">
</div>
<!--
This should have top space of 10px from red bar when red bar is displayed and when red bar is hidden, the top space of 10px should be there from window.
This should be scrollable
-->
<div class="btn-wrapper">
<button onclick="toggleBar();">Toggle Bar</button>
</div>
<!--
This should have same consistent space from window top whether the red bar is present or not.
This should be scrollable.
-->
<div class="logo">
Logo
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>

You can try changing position: fixed; to position: sticky; on your .bar class CSS code. After that, to prevent the logo from moving, add the following CSS code:
.bar[style='display: block;'] ~ .logo {
margin-top: 0px;
}
This should remove the margin from your logo upon detecting a visible .bar element before it.

Doing this with only CSS is a bit tricky. But, luckily, position: fixed gives a way out.
Just because it's in the top doesn't mean it has to be the first element.
body {
padding: 0;
margin: 0;
}
#top_wrapper {
min-height: 95px;
}
#togglebutton {
position: absolute;
margin: 0;
padding: 0;
width: 0;
height: 0;
visibility: hidden;
}
#togglebutton_label {
display: inline-block;
margin-top: 30px;
}
#togglebutton_label button {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
#togglebutton:checked ~ #bar {
display: none;
}
#togglebutton:checked + #togglebutton_label {
margin-top: 10px;
}
<div id="top_wrapper">
<input type="checkbox" id="togglebutton">
<label id="togglebutton_label" for="togglebutton">
<button>Toggle Bar</button>
</label>
<div class="logo">
Logo
</div>
<div class="bar" id="bar"></div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>
I wrapped the bar, the button and the logo in a div, where the button is first.
The button is in a label that's connected to an invisible checkbox.
Clicking the button sets the checkbox and then a selector can affect the following bar element.

Div to always occupy the size of the window in height and width

I'm trying to enter the page to display a div on the entire screen (full width and full height) whatever the size of the browser window. That is to say, that div occupies ALL and until you do not scroll you do not see what is underneath.
It seems to work in the high, because even if you make it higher or smaller the next div below is not seen unless you scroll down, so far so good.
But in the width is another matter, it does not cover me the totality, and on top if I reduce the width of the window of the navigator the text is not molded to that width and the horizontal scroll appears.
Translated with www.DeepL.com/Translator (free version)
HTML code
<div id="slider-total">
<h1>Prueba de titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt et explicabo impedit ducimus facere quam ipsum vero, accusamus molestias! Dolore perferendis pariatur esse at eaque qui aspernatur consectetur laboriosam.</p>
</div>
<div id="siguiente">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
</div>
CSS code:
* {
box-sizing: border-box;
}
#slider-total {
width: 100vh;
height: 100vh;
background-color: #444;
color: white;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
What am I doing wrong?
Thanks

Your width is 100vh, or 100 percentiles of the viewport height. It makes sense, therefore, that the width of the <div> will be smaller than needed if you have a viewport that is wider than it is tall. It should be 100vw, or 100 percentiles of the viewport width.

Is it possible to ignore video element underneath sticky navbar to enable links?

I'm a total beginner and I'm trying to make my first website.
My problem is that when I scroll down the website and the navbar is "over" the video element, the navbar links stop functioning. I assume this may have something to do with the video element taking precedence over the sticky navbar links. However, if I replace the video element with a box or an image, the navbar links work even when the navbar is over the video. Could someone please try to explain where I'm missing something?
Thanks in advance!
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

Yes you are right, I forgot Firefox reads this properly almost always without z-index declared. Other including Chrome and Safari do not. You need z-index CSS property.
Just add z-index: 99; for example to your nav element so it will be allways on top of everything.
Also take note z-index does not work on elements that do not have position declared. . Read more about it here
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
z-index: 99;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

You can do it by adding a position to your banner and a -1 z-index like this
.banner {
padding-top: 2rem;
z-index:-1;
position: relative;
}
Here's it working
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
position: relative;
z-index: -1;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

Flexbox wrap issue - Aligning two scrollable divs next to each other in a container of height 100vh

I want the following flex box layout to:
Have individual scrolling for the Sidebar and the Content area when the content in them overflows
Content area to appear next to the sidebar
Height of the main container to remain 100vh and neither the sidebar or the content area should exceed this.
The alert is for alerting users about issues. It should be on top and should occupy 100% of the width.
The user can choose to use the sidebar. If the sidebar is not used, content occupies 100% width. The alert will also only appear when something is wrong. If not then alert will not be shown
I am not sure why the content area appears below the sidebar and the sidebar and the content areas don't activate scrolling even after they overflow. You can see that the height of the sidebar exceeds the height of the main container (the background color of the main area is cyan).
.main {
display: flex;
flex-wrap: wrap;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
order: -2;
}
.main .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>

Method #1: flex-direction:column and nested flex container
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 30px;
background: yellow;
}
.inner-flex-container {
display: flex;
}
.inner-flex-container .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.inner-flex-container .sidebar {
flex: 0 0 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="inner-flex-container">
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam
magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit,
tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis
magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure,
hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati
optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima
assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam,
officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div><!-- close .inner-flex-container -->
</div>
jsFiddle
Notes:
Added body { margin: 0; } to prevent overflow and vertical scrollbar when .main has height: 100vh.
Switched flex-direction of .main to column to establish vertical stacking.
Wrapped second and third flex items (.content and .sidebar, respectively) in their own flex container, which has flex-direction row so items are stacked horizontally below the first flex item (.alert).
Method #2: flex-wrap:wrap and calc()
body {
margin: 0;
}
.main {
display: flex;
flex-wrap: wrap;
max-height: 100vh;
background: cyan;
}
.alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
}
.content {
flex-basis: 50%;
background: blue;
overflow-y: auto;
height: calc(100vh - 30px);
order: 1;
}
.sidebar {
flex-basis: 50%;
background: red;
height: calc(100vh - 30px);
overflow-y: auto;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni
quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur
libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem
optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio
pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda
eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident
quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus
dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>
jsFiddle
Notes:
No changes to HTML
calc used to subtract height of flex item one from height of flex items two and three, enabling them to wrap underneath in a 100vh container.

Edited to add the wrapper
.content{
flex: 1 1 auto;
background: blue;
overflow-y: auto; */
width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
.wrapper{
display:flex;
flex-wrap:wrap;
}