how to make div scrollable with 100% height and width?

how to make div scrollable with 100% height and width? - html

i have included one table 100% and 100%.
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="100">
<td>
this is fixed height 100px
</td>
</tr>
<tr>
<td>
<div style="height: 100%;width: 100%">
remaining height for this td. and this div should be do only vertical scrolling without expanding the page size.
</div>
</td>
</tr>
</table>
first tr height is fixed height 100px
remaining height for this second tr. and this tr contains a div with 100% height and width, this div should be do only vertical scrolling without expanding the page size.

Working jsFiddle Demo
There is no need to use table. Use div instead:
<div id="head">this is fixed height 100px</div>
<div id="body">
Content
</div>
And CSS:
#head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: yellow;
}
#body {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: pink;
overflow: auto;
}
Full Page Markup:
<!doctype html>
<html>
<head>
<title>My Page</title>
<style>
#head {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: yellow;
}
#body {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: pink;
overflow: auto;
}
</style>
</head>
<body>
<div id="head">this is fixed height 100px</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
</div>
</body>
</html>

With your demo link I was able to successfully see what your issue is.
You do not have the following code in your second <div>'s style="" tag.
white-space: nowrap; overflow-x: hidden;
If you add it you should be up and running.

Trye style="height:auto; overflow-y:scroll"

Try this style="height:100%; overflow-y:scroll"

try like this <div style="height: 100%;width: 100%;overflow-y: scroll;">

Related

div not displaying in browser but displaying in code editor

I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="ad-1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="ad-2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="ad-3"></div>
<div class="ad-4"></div>
<div class="ad-5"></div>
<div class="ad-6"></div>
</div>
as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.

After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="number1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="number2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="number3"></div>
<div class="number4"></div>
<div class="number5"></div>
<div class="number6"></div>
</div>

The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.

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>
</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;
}

Collapse divs vertically CSS

I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !

Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}

It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/

Position section element below the header

I am trying to make the section element to start from 1px below the header element, so I set its top property as in the css code. I thought I was doing every thing correctly but it is still starting half way into the header element.
Any ideas? Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

Add position:relative in section top is not render without position
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
position:relative;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

remove top from the section and add the margin-top for it
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top:45px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

There are two things you need to do.
First: Give following css to remove default margin and padding of browser.
* {
margin: 0;
padding: 0;
}
Second: Give margin-top: 1px; to section instead of top.
Check how top works.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top: 1px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

The reason for this is when the element is fixed, then it gets taken out of the "flow" of the document.
You can fix it with adding a margin-top to the section area and removing the top;
section {
margin-top: 40px;
background-color: red;
}
Hopefully this helps

You need to ensure that <section> is set to position: relative
Please see the following fiddle: https://jsfiddle.net/p741tbxx/
section {
top: calc(1.5em + 1px);
background-color: red;
position: relative;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008