Child elements expanding outside parent element with flex - html

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.