Full height bootstrap grid - with nested overflow-y: scroll

Question

I have problems with the bootstrap grid and a nested div with overflow-y. Like mentioned in this stack overflow post, I tried to add a min-height:0 to the parent ancestor, but can't get it to run.

left Chrome, right: Firefox

In Chrome the layout is rendered okay (no browser scrollbar) and a scrollbar in the red area marked with the overflow-y: scroll.

In Firefox the layout isn't rendered okay (browser scrollbar is shown, no scrollbar in red area)

My goal is to have a 100% height webpage with a vertical splitted right column (25% | 75%) and a scrollbar in the red area in all browsers ;-)

I've put the sources to a codepen

Any suggestions, how to achieve the expected behaviour?

myjab · Accepted Answer · 2018-11-15 16:44:05Z

0

I've adjusted your code a little, please check out this fiddle.

Try adding height: 100vh; to .bg-secondary. Additionally I've moved the overflow-y: scroll to .bg-danger

And make sure you have imported all necessary bootstrap files, I've used bootstrap.min.js(v4.1.3), bootstrap.css (v4.1.3), popper.min.js (1.12.9), jquery-3.2.1.slim.min.js

answered Nov 15, 2018 at 16:44

myjab

181 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Full height bootstrap grid - with nested overflow-y: scroll

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related