1

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?

carstinho
  • 78
  • 4

1 Answers1

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

myjab
  • 18
  • 1
  • 3