Child elements expanding outside parent element with flex

Question

I have used CSS flex to display two divs side by side which are contained inside a wrapper and I have been trying so that inside #myClippetWrapper is where I set the height, so in the child elements of #myClippetWrapper I can just set height: 100%; .

But as you can see from running the snippet below all of the elements inside #myClippetWrapper go outside of the main section, they are all hanging out of the main content div?

I don't want to use overflow: auto because I do not want a scroll bar there, I just need the child elements of #myClippetWrapper to not be outside of the main section/ div.

 main { margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 8px; background-color: red; width: 100%; max-width: 50%; height: auto; } #myClippetWrapper { display: flex; height: 700px; } #clippetNav { padding: 10px; width: 250px; height: 100%; background-color: #222222; margin-right: 10px; } #codeAndNotesWrapper { display: flex; width: 100%; } #codeAndNotesWrapper>div { flex-basis: 100%; height: 100%; } #codeView { padding: 10px; /*flex: 0 0 40%;*/ height: 100%; background-color: #222222; margin-right: 10px; } #noteView { padding: 10px; /*flex: 1;*/ height: 100%; background-color: #222222; } #codeNotesEditor { height: 100%; background-color: #EAEAEA; }

 <main> <div id="myClippetWrapper"> <div id="clippetNav"> </div> <div id="codeAndNotesWrapper"> <div id="codeView"> </div> <div id="noteView"> <div id="codeNotesEditor"> </div> </div> </div> </div> </main>

Answer 1

In many cases, flexbox eliminates the need to use percentage heights.

An initial setting of a flex container is align-items: stretch . This means that in flex-direction: row (like in your code) flex items will automatically expand the full height of the container.

Alternatively, you can use flex-direction: column and then apply flex: 1 to the children, which can also make a flex item expand the full height of the parent.

 main { max-width: 50%; margin: 10px auto; padding: 8px; background-color: red; } #myClippetWrapper { display: flex; height: 700px; } #clippetNav { display: flex; padding: 10px; width: 250px; margin-right: 10px; background-color: #222222; } #codeAndNotesWrapper { display: flex; width: 100%; } #codeAndNotesWrapper>div { display: flex; flex-basis: 100%; } #codeView { display: flex; padding: 10px; margin-right: 10px; background-color: #222222; } #noteView { display: flex; flex-direction: column; padding: 10px; background-color: #222222; } #codeNotesEditor { flex: 1; background-color: #EAEAEA; }

 <main> <div id="myClippetWrapper"> <div id="clippetNav"></div> <div id="codeAndNotesWrapper"> <div id="codeView"></div> <div id="noteView"> <div id="codeNotesEditor"></div> </div> </div> </div> </main>

jsFiddle

Answer 2

Add

 box-sizing: border-box;

To your child elements. This will make the padding show on the inside of the box rather than the outside and will not increase the overall size.

Answer 3

Add the box-sizing property..

 * { box-sizing: border-box; } main { margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 8px; background-color: red; width: 100%; max-width: 50%; height: auto; } #myClippetWrapper { display: flex; height: 700px; } #clippetNav { padding: 10px; float: left; width: 250px; height: 100%; background-color: #222222; margin-right: 10px; } #codeAndNotesWrapper { display: flex; width: 100%; } #codeAndNotesWrapper>div { flex-basis: 100%; height: 100%; } #codeView { padding: 10px; /*flex: 0 0 40%;*/ height: 100%; background-color: #222222; margin-right: 10px; } #noteView { padding: 10px; /*flex: 1;*/ height: 100%; background-color: #222222; } #codeNotesEditor { height: 100%; background-color: #EAEAEA; }

 <main> <div id="myClippetWrapper"> <div id="clippetNav"> </div> <div id="codeAndNotesWrapper"> <div id="codeView"> </div> <div id="noteView"> <div id="codeNotesEditor"> </div> </div> </div> </div> </main>

Answer 4

A big factor with setting your display: flex; Is padding and height can make a nasty couple; Take this example into account:

display: flex;
height: 100%;
padding-top: 1vh;

This would essentially make your element the pages height, plus 1% of the view height, and of course give you a child element thats taller than its parent element.

This isn't a direct answer to your question, instead one to people looking here for why their child elements may be acting up.