How to force display flex to stay inside

Question

I am trying to add two divs to an element. The first div should have a fixed height and position. The second div should take up the rest of the space (if needed), but never exceed it. I've prepared the following example, to display the desired output.

#container {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
}

#fixed {
  flex: 0 0 50px;
  background: red;
}

#free {
  flex: 1;
}

#scroll {
  max-height: 100%;
  overflow-y: scroll;
  background: blue;
}

<div id="container">
  <div id="fixed">Should always appear</div>
  <div id="free">
    <span>Should always appear</span>
    <div id="scroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

This example displays the problem that arises when the contents of the second div are too large.

#container {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
}

#fixed {
  flex: 0 0 50px;
  background: red;
}

#free {
  flex: 1;
}

#scroll {
  max-height: 100%;
  overflow-y: scroll;
  background: blue;
}

<div id="container">
  <div id="fixed">Should always appear</div>
  <div id="free">
    <span>Should always appear</span>
    <div id="scroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nec dolor a dignissim. Nunc auctor felis a turpis tincidunt auctor. Suspendisse venenatis volutpat sodales. Maecenas sodales est non quam vestibulum fermentum. Nulla venenatis
      sapien sit amet augue ultricies molestie. Sed neque nulla, venenatis non est a, imperdiet dictum tortor. Nam at odio rutrum, convallis neque blandit, viverra urna. Maecenas scelerisque risus eu mollis ornare. Nullam tincidunt tempus vehicula. Aenean
      at porttitor ex. Fusce tincidunt nulla velit, id gravida lacus vestibulum nec.
    </div>
  </div>
</div>

I would accept any answer that solves this problem regardless of what combination of css and html is used (that doesn't change the order of the elements), as long as no javascript and no more height properties are added (i.e top: 40px;, min-height: calc(100% - 40px); ...), with the exception of 0, auto and 100%.

@Paulie_D I don't think the duplicate applies. I can't use `min-height` since there is another children occupying space. — nick zoum, Oct 10 '19 at 14:32
@Paulie_D that's not even the same question, nor the answer to that question is anything he needs to do in this specific question.. No need to flag something to boost your stats when its not the correct thing to do.. — King11, Oct 10 '19 at 14:50
It is since the essential answer is to add `min-height:0` to `#free` - https://codepen.io/Paulie-D/pen/bGGVgYq — Paulie_D, Oct 10 '19 at 15:10
@Paulie_D While the blue area is overflowing it seems using the same approach (flex) on the inner block, solves the problem. — nick zoum, Oct 10 '19 at 17:50

King11 · Accepted Answer · 2019-10-10T18:19:26.230

1

Edit: Added min-height: 0 to div's css as well as an updated fiddle.

If I understand the question correctly, is this what you're looking for?

#free {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

Jsfiddle: https://jsfiddle.net/nick_zoum/Lod38e9a/3/

edited Oct 10 '19 at 18:19

answered Oct 10 '19 at 13:58

King11

1,239
3
9
17

I'm sorry, while minimizing my code it seems that I removed some parts that were essential. I've updated the question. – nick zoum Oct 10 '19 at 14:05
ok, I've updated my jsfiddle. check it out to see if this is what you're looking for? – King11 Oct 10 '19 at 14:07
Nope, I need the span to be inside the `free` part. Wouldn't have posted the question otherwise – nick zoum Oct 10 '19 at 14:10
ok, let me see what i can do – King11 Oct 10 '19 at 14:11
I updated my jsfiddle, In adding the overflow property, it has two scroll-able parts in the div because of the span. Is having two scroll-able parts sufficient? – King11 Oct 10 '19 at 14:22
The solution was to use `min-height: 0` (to override `min-height: auto`). Here's a [fiddle](https://jsfiddle.net/nick_zoum/Lod38e9a/3/). Please add the code as a snippet to to your answer, so I can accept it. – nick zoum Oct 10 '19 at 18:13
Done. I've updated and added the code as a part of my answer and included you jsfiddle as well – King11 Oct 10 '19 at 18:20

How to force display flex to stay inside

1 Answers1