CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4
dcio
dcio

Reputation: 23

Flexbox 100% Height Background Issue

I've created a 2 column layout that should fill 100% height and functions as desired, but on Chrome / Safari if the content expands beyond the browser height the background on the right column cuts off when scrolling:

http://codeply.com/view/yCE7TYvKkV

Screenshot of issue when scrolling enter image description here

I can't for the life of me figure out how to remedy this, any insight appreciated.

Upvotes: 0

Views: 48

Answers (1)

MontyGoldy
MontyGoldy

Reputation: 749

Ok So your problem is this div

<div class="row h-100">
  //Content
</div>

And you have applied height: 100%; to it which is causing the problem As your right and left column height is fixed to the window height.

So If you remove your h-100 class It will work fine.

Upvotes: 1

Related Questions