0

I'm trying to create a flexbox that occupies the whole height of my page. It has 2 divs inside: a top div with height: 80px, and a bottom div, which will occupy the remaining space. The problem is: that bottom div has content that can overflow. When this happens, the height: 80px of the top div is completely ignored and it shrinks. How do I guarantee that my top-div will not shrink based on the overflow of the bottom div?

Here is the demo.

1 Answer 1

3

Your use of flex wasn't quite valid. Try this: Fiddle here

CSS

* { margin: 0px; padding: 0px; box-sizing: border-box; }
#page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 600px;
  overflow: hidden;
}
#top {
  background-color: #999;
  flex: 0 1 80px; /* Change 80px if diff needed, it is the basis parameter.     It means that the base height will be 100px before growing or shrinking. */
}
#bottom {
  background-color: #d7d7d7;
  flex:4 0 400px;
  overflow: scroll;
}
3
  • What wasn't quite valid about my flex?
    – MaiaVictor
    Feb 13, 2015 at 20:15
  • 1. You use flex-grow on the child elements inside the flex container. 2. Calling display: flex in the child elements does nothing for it unless it too has child elements inside it. So when you called flex-direction and flex-wrap inside the child element, it did nothing because it was not the parent flex container. For more reference check out this guide css-tricks.com/snippets/css/a-guide-to-flexbox Feb 13, 2015 at 21:10
  • Hope that helps you understand better, can be a little confusing getting into flexbox. In the link, examples are separated by parent(left) and child(right) attributes when using flexbox. Feb 13, 2015 at 21:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.