Flex content does not fit height of the parent content - html

Question

I have the following layout, it is a wrapper (content) which contains some other divs which also have some flex properties.
As you can see from the following link the divs inside content are now scaling up with the size of the content.
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
height: 100%;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
What I would like to achieve:
- red, yellow, green divs should me height as the blue (content) div, so when scrolling you do not see the blue part in the bottom
How to achieve this? What is wrong with my code?
I support only latest chrome and I can use CSS3

Answer 1

Your .a is overflowing into .content which is why you see blue section being displayed at the bottom.
By giving .a or rather, all of the children div's an auto overflow, they will follow their parent's height and avoid content overflowing.
Though, it'll introduce a scrollbar. If you are comfortable with hiding the overflowed text, you can use overflow: hidden instead.
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.content > div {
overflow: auto;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
padding-top: 20px;
padding-bottom: 20px;
background-color: yellow;
}
.c {
width: 165px;
margin-right: 15px;
flex-grow: 1;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>

Answer 2

I think the best option for your problem is either
moving overflow: auto; from the .content class to it's children.
changing the height: 400px; to min-height: 400px; if you have no problem with the container being larger than 400px;
adding a wrapper divwith height: 400px; and overflow: auto; around the .content and removing both rules from the .content(imo the best option)

Answer 3

Remove display: flex from .content and height: 100% from .a .b .c and then wrap your elements in a div and give it a display flex.
Working code:
.content {
width: 100%;
height: 400px;
overflow: auto;
background-color: blue;
}
.inner{
display: flex;
}
.a {
width: 165px;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
}
<div class="content">
<div class="inner">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
</div>

Answer 4

You could possibly try:
flex: 1 1 auto
It sizes based on width/height properties..
check out
Css Tricks article on it.
EDIT
Remove the flex-grow: 1 and it will be the height you need.
.content {
width: 100%;
height: 400px;
overflow: auto;
background-color: blue;
}
.inner{
display: flex;
}
.a {
width: 165px;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
}
.c {
width: 165px;
margin-right: 15px;
background-color: green;
}

Answer 5

The problem is here .a section overflow. As you bind the .content 400px height. So there are two ways, You could either free from them to bind height or use overflow scroll for .a section. You can compare the previous and fixed code below.
.content {
width: 100%;
/*height: 400px;*/
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
/*height: 100%;*/
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
/*height: 100%;*/
box-sizing: border-box;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
/*height: 100%;*/
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
height: 100%;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>