Search code examples
htmlcssflexboxviewport

CSS: How To Fix HTML Child Elements Not Respecting Parent 100vh

The GIF below is the layout that I want to achieve with HTML and CSS.

enter image description here

The code below also represents the layout above. However if you fill in the child elements with content and resize the browser window, the children do not respect the body's view-port height of 100vh. The content overlaps each other and some of the children push down their siblings hence the parent's viewport of 100vh is not respected.

CODE BELOW:

html,
body {
  height: 100vh;
  background-color: gray;
  margin: 0 0 0 0;
}

body {
  display: flex;
  flex-direction: column;
}

#header {
  background-color: greenyellow;
  height: 50px;
}

#main {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#section-1_alert-wrapper {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

#section-1 {
  background-color: yellow;
  height: 100%;
}

#alert {
  background-color: red;
  color: white;
  max-height: 30%;
  height: 50%;
}

#section-2 {
  background-color: rgb(24, 255, 243);
  ;
  width: 50%;
  height: 100%;
}

#footer {
  background-color: blue;
  color: white;
  height: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./main.css">
  <title>Document</title>
</head>

<body>

  <header id="header">header</header>

  <main id="main">

    <div id="section-1_alert-wrapper">

      <div id="section-1">Section 1
        <br>
        <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
        esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
        expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi,
        vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
      </div>

      <div id="alert">Alert
        <br>
        <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
        esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
        expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
      </div>

    </div>

    <div id="section-2">Section 2
      <br>
      <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
      esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
      expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
    </div>

  </main>

  <footer id="footer">footer</footer>

</body>

</html>

What I want to achieve if for the alert, section 1, and section 2 to become scroll-able once content fills up their entire space and still adhere to the body's 100vh even on browser window resize. The alert's max-height should be 30% once content fills up it's space. The body should also NEVER become scroll-able even on window resize

Solution

  • Simply add an overflow-y property with a value auto to the classes you want scroll-able. auto ensures that a scrollbar is added to an element only when its content has exceeded its height

    html,
body {
  height: 100vh;
  background-color: gray;
  margin: 0 0 0 0;
}

body {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

#header {
  background-color: greenyellow;
  height: 10vh;
}

#main {
  display: flex;
  flex-direction: row;
  height: 80vh;
}

#section-1_alert-wrapper {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

#section-1 {
  background-color: yellow;
  height: 100%;
  overflow-y: auto;
}

#alert {
  background-color: red;
  color: white;
  max-height: 30%;
  height: 50%;
  overflow-y: auto;
}

#section-2 {
  background-color: rgb(24, 255, 243);
  ;
  width: 50%;
  height: 100%;
  overflow-y: auto;
}

#footer {
  background-color: blue;
  color: white;
  height: 10vh;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./main.css">
  <title>Document</title>
</head>

<body>

  <header id="header">header</header>

  <main id="main">

    <div id="section-1_alert-wrapper">

      <div id="section-1">Section 1
        <br>
        <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
        esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
        expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi,
        vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
      </div>

      <div id="alert">Alert
        <br>
        <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
        esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
        expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
      </div>

    </div>

    <div id="section-2">Section 2
      <br>
      <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Et esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
      esse, quas exercitationem expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?Lorem ipsum dolor sit amet consectetur adipisicing elit. Et esse, quas exercitationem
      expedita ipsum animi, vitae dolor voluptates culpa saepe quibusdam quis obcaecati eos assumenda molestias laudantium cupiditate quod iste?
    </div>

  </main>

  <footer id="footer">footer</footer>

</body>

</html>