nutrina nutrina - 6 months ago 35
CSS Question

Limit flex item height in a flexbox layout

I am trying to create a flexbox layout like shown in this jsfiddle.
This is the HTML:

<div class="container">
<div class="header">
header
</div>
<div class="content">
</div>
<div class="footer">
footer
</div>
</div>


This is the CSS:

.container {
background-color: green;
height: 300px;
max-height: 300px;
display: flex;
flex-direction: column;
}

.header {
background-color: yellow;
flex: 0 0 50px;
}

.content {
background-color: blue;
flex: 0 0 90%;
overflow: scroll;
}

.footer {
background-color: red;
flex: 0 0 40px;
}


And it works, but I would also limit the size of the entire layout not extend beyond the '.container' elements fixed height.

How can I achieve this?

Thanks,
Gerald

Answer

You just need to make .content fill the entire allowed space within the container by adding flex: 1; property to it.

Working Example:

var i;
for (i = 0; i < 100; i++) {
  $(".content").append("<div>hello " + i + "</div>");
}
.container {
  background-color: green;
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border:3px solid black;
}

.header {
  background-color: yellow;
  flex: 0 0 50px;
}

.content {
  background-color: blue;
  flex: 1;
  overflow: scroll;
}

.footer {
  background-color: red;
  flex: 0 0 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
  </div>
  <div class="footer">
    footer
  </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/0aumg6b0/

Comments