height: 100vh; and overflow "content" on smaller screens

Question

I have a height: 100vh; but I have a lot of content, which overflows into another "vh" on smaller screens, how do I deal w/ the overflow, on smaller screens?

Answer 1

If I understand correctly, you have multiple elements with height: 100vh, and the problem is that their content may overflow them.

In that case, you can

• Use the overflow property to handle overflow correctly.

  For example overflow: auto will add scrollbars only when necessary.

  html,body {
    margin: 0;
  }
  section {
    height: 100vh;
    overflow: auto;
    background: yellow;
  }
  section + section {
    background: lime;
  }
  div {
    height: 150vh;
    margin-left: 15px;
    border-left: 1px dotted;
  }

  <section>
    Start<div></div>End
  </section>
  <section>
    Start<br />End
  </section>

• Use min-height: 100vh instead of height: 100vh

  This way, if the content is taller, the element will grow to avoid overflow.

  html,body {
    margin: 0;
  }
  section {
    min-height: 100vh;
    background: yellow;
  }
  section + section {
    background: lime;
  }
  div {
    height: 150vh;
    margin-left: 15px;
    border-left: 1px dotted;
  }

  <section>
    Start<div></div>End
  </section>
  <section>
    Start.<br />End
  </section>

Answer 2

Please try overflow: auto; in the style of the container.

Sample code