CODEWITHSUNDEEP
htmlcssscrollflexboxstyling
Link_Cable
Link_Cable

Reputation: 453

Div overflowing container div with height: 100%, overflow: hidden breaks scroll-y

First, the fiddle:

https://jsfiddle.net/bsdvc4km/1

I'm having trouble aligning an inner div to take up the rest of the height of a container. As you can see in the fiddle, the div "whole" has a header attached to it, and underneath is a "content" div. This "whole" div is overflowing the "content" div with height 100%, instead of grabbing the height of its parent "content", it grabs the height of the entire viewport. 

<div class="whole">
     <div class="left">
     </div>
     <div class="right">
     </div>
</div>

This container should properly be fitting inside

<div class="content">
    <div class="whole">
    </div>
<div>

The reason there are essentially two divs, "chrome" and "content", to hold the left and right divs is that this is for a react app and "chrome" is a div wrapper around what another component returns.

If I add an overflow:hidden to the "chrome" div, it appears to solve my problem. However, because the heights are still too tall, but merely invisible, the "right" div, which contains a bunch of assets intended to be scrolled through, breaks as you reach the end of the div with the scroll bar but it's cut off.

Example of this: https://jsfiddle.net/gy1kpxwk/3

So, basically I'm asking does anyone know how to make it so the "whole" div does not break out of its parent, the "content" div, and properly fills the rest of the space not taken up by the header?

tl;dr make container properly fill rest of parent container, and not break an overflow-y: scroll

Upvotes: 2

Views: 2479

Answers (1)

Link_Cable
Link_Cable

Reputation: 453

In case anyone wants to know, using a lot of flex boxes fixed my problem.

Here's a codepen by /u/bonhone of reddit who solved it: http://codepen.io/anon/pen/gpjReQ

  display: flex;
  flex-grow: 1;

are the magic css lines I used. :)

Upvotes: 1

Related Questions