When three divs with overflow scroll exceed the maximum height of 100%, they will not fit on the page

Question

When three divs with overflow scroll exceed the maximum height of 100%, they will not fit on the page

body,html{
  max-height:100vh;
}
#content{
  max-height:100%;
}


#div1,#div2,#div3{
  background:#fff;
  overflow-y:scroll;
  max-height: 30%;
}

I'm struggling to get this to function properly.
For instance, "title2" should have an overflow scroll but instead it continues overflowing its parent. It doesn't fit within the page's max-height of 100%.

Check out the example here

css

Answer 1

Answer №1

Regrettably, the use of overflow: scroll is not viable when the height is specified as a percentage, which is your current setup. An alternative approach would be to utilize vh units instead, offering similar functionality to percentages for sizing.

If you're unfamiliar with what vh entails, check out this informative article:

For illustration purposes, here's a code snippet:

body,
html {
  max-height: 100vh;
}
#content {
  max-height: 100%;
}
#div1,
#div2,
#div3 {
  background: #fff;
  overflow-y: scroll;
  max-height: 30vh;
}

<div id="content">
  <h2>
title1
</h2>
  <div id="div1">
    <div>row</div>
    <div>row</div>
    ...
    <div>row</div>
  </div>
  ...
  <h2>
title2
</h2>
  <div id="div2">
    <div>row</div>
    <div>row</div>
    ...
    <div>row</div>
  </div>
  ...  
  <h2>
...
    <div>row</div>
)</div>

Answer 2

Regrettably, the use of overflow: scroll is not viable when the height is specified as a percentage, which is your current setup. An alternative approach would be to utilize vh units instead, offering similar functionality to percentages for sizing.

If you're unfamiliar with what vh entails, check out this informative article:

For illustration purposes, here's a code snippet:

body,
html {
  max-height: 100vh;
}
#content {
  max-height: 100%;
}
#div1,
#div2,
#div3 {
  background: #fff;
  overflow-y: scroll;
  max-height: 30vh;
}

<div id="content">
  <h2>
title1
</h2>
  <div id="div1">
    <div>row</div>
    <div>row</div>
    ...
    <div>row</div>
  </div>
  ...
  <h2>
title2
</h2>
  <div id="div2">
    <div>row</div>
    <div>row</div>
    ...
    <div>row</div>
  </div>
  ...  
  <h2>
...
    <div>row</div>
)</div>

Answer 3

Answer №2

Let's see if I understood this correctly. I created a JSFiddle example

Simply swap out max-height:30% with max-height:33vh

Answer 4

Let's see if I understood this correctly. I created a JSFiddle example

Simply swap out max-height:30% with max-height:33vh

Answer 5

Answer №3

give this a try and hopefully it will work for you. Here is a fiddle link: https://jsfiddle.net/cbjkc4dg/4/

Make sure to enclose each block with a div tag like shown below:

<div class="block">
   <h2>title1</h2>
   <div id="div1">
     <div>row</div>
     <div>row</div>
     <div>row</div>
     <div>row</div>
   </div>
 </div>

As for the styling, you can set the height of the main parent container to 100vh to make its parent element flexible as well. See example below:

body,
html {
 overflow: hidden;
}

#content {
 height: 100vh;
}

.block {
 height: calc(100vh / 3);
 overflow: hidden;
}

#div1,
#div2,
#div3 {
 background: #fff;
 overflow-y: scroll;
  height: calc(100% - 37px);
}

Answer 6

give this a try and hopefully it will work for you. Here is a fiddle link: https://jsfiddle.net/cbjkc4dg/4/

Make sure to enclose each block with a div tag like shown below:

<div class="block">
   <h2>title1</h2>
   <div id="div1">
     <div>row</div>
     <div>row</div>
     <div>row</div>
     <div>row</div>
   </div>
 </div>

As for the styling, you can set the height of the main parent container to 100vh to make its parent element flexible as well. See example below:

body,
html {
 overflow: hidden;
}

#content {
 height: 100vh;
}

.block {
 height: calc(100vh / 3);
 overflow: hidden;
}

#div1,
#div2,
#div3 {
 background: #fff;
 overflow-y: scroll;
  height: calc(100% - 37px);
}

When three divs with overflow scroll exceed the maximum height of 100%, they will not fit on the page

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting issues with adding rows to an HTML table

Fuzzy Background to Enhance Your Bootstrap 5 Offcanvas Navigation Menu

While working on coding, the background of the Bootstrap 4 navbar seemed to have disappeared

Is it possible to highlight the original 'anchor' or position of an element that has been moved using the float property?

Customizing the field_error_proc in Rails is causing issues with the HTML layout

Instructions on implementing a floating label on a select2 dropdown menu

Working with Ext JS: Dynamically adjusting panel size when the browser window is resized

Creating Bootstrap carousel indicators within a navbar can enhance the user experience and navigation of

Execute a function within the ajax success callback

What is the best way to ensure that all elements are perfectly centered in an

Delayed loading of CSS within app-root component in Angular

Unable to stack DIVs in a vertical arrangement

Place a full-width block within a grid design

What is the best way to center these icons vertically in my navigation menu using CSS?

Bootstrap 3's responsive embed feature is not functioning as expected

The parent is relatively positioned and its child is absolutely positioned and floated to the left

CSS Opacity Issue

Troubleshooting IE7's overflow problem

Showing headings in the table vertically

Can you provide instructions on how to adjust the width of a form using a JavaScript script within a CSS file?