Is there such a thing as overflow control with Flexbox?

Question

I might be missing something very basic here, but I cannot find how to control overflow with Flexbox.

Is there a way to make sure a flex container will not be bigger than its flex parent, despite any big image/list/... ?

I cannot reproduce my exact case but the case below shows how a picture can wreak some havoc and I did not succeed with max-width/max-height or overflow.

.parent {
  border: dotted 1px red;
  display: flex;
  max-height: 50px;
}
.content {
  border: solid 1px blue;
  display: flex;
  flex: 1 1 auto;
}
.menu {
  flex-grow: 0;
  flex-direction: column;
  overflow-y: scroll;
}
.large {
  flex-grow: 3
}

<div class="parent">
  <div class="content menu">
    <div>
      some header
    </div>
    <div>
      <ul>
        <li>
          <img src="https://css-tricks.com/wp-content/uploads/2014/05/flex-container.svg" />
        </li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
      </ul>
    </div>
  </div>
  <div class="content large">
    the content
  </div>
  <div class="content">
    ads
  </div>
</div>

I know the correct solution would be to rewrite all the flexbox structure of the app (a bit of legacy, quickly done work and so on), but this will have to wait as we are quite in a rush right now.

My own case

Edit: here is the case that's troubling me. I cannot reproduce the whole structure quickly in a fiddle, but you may get the gist from my previous try at it.

Expected

This is how my layout should look like and how it does look like once I've removed all problematic <li> from the left column.

Actual

The left column is an unordered list. The content of some <li> may grow too long, resulting in the left menu getting bigger and spreading over what should be a margin.

In one case, we have an (wide) image in the <li>. The whole parent is then widened, beyond the screen, with no possibility to scroll. The action buttons we should have on the right of the title bar would be inaccessible.

CSS SitRep

We have overflow: hidden rules on all the <li> and <div> inside the list and flex-basis: 0 for each container.

may be I read wrong, but I didn't get what you want. As your container is not bigger than its flex parent. What exactly you want ? — Madan Bhandari, Nov 21 '16 at 12:36
You're using flex-grow and flex-shrink properties, which are designed to distribute space in the flex container, *not define the size of flex items*. Define a value for flex-basis to control sizing ('auto' simply means 'use the content's natural size'). More details: http://stackoverflow.com/q/34352140/3597276 — Michael Benjamin, Nov 21 '16 at 12:36
@Michael_B After reading your answer, I tried if `flex-basis: 0` would be any help. It seems to have solved my problem. — Chop, Nov 21 '16 at 13:07
Could you post an image showing what your code sample _should_ look like? — Asons, Nov 21 '16 at 19:22
The only difference I can see in those images is that the scroll is different, so, if you want a good answer, you really need to extract a code snippet that reproduces the issue. — Asons, Nov 22 '16 at 16:15

score 1 · Answer 1 · answered Nov 21 '16 at 16:54

Yes, by using height instead of max-height

.parent {
  border: dotted 1px red;
  display: flex;
  max-height: 50px;
  height: 50px;
}
.content {
  border: solid 1px blue;
  display: flex;
  flex: 1 1 0;
}
.menu {
  flex-direction: column;
  overflow-y: scroll;
}
.large {
  flex-grow: 3
}

<div class="parent">
  <div class="content menu">
    <div>
      some header
    </div>
    <div>
      <ul>
        <li>
          <img src="https://css-tricks.com/wp-content/uploads/2014/05/flex-container.svg" />
        </li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
      </ul>
    </div>
  </div>
  <div class="content large">
    the content
  </div>
  <div class="content">
    ads
  </div>
</div>

The `flex-basis: 0` (`flex: 1 1 0`) was more what I was looking for, thanks! It does not fix all, but it's a very good start. Maybe you could speak of it too in your answer so that future reader do not have to compare our code to find the difference. — Chop, Nov 22 '16 at 07:14
As a side note, deactivating the `height` rule (Chrome debugger) does not change anything. Fixing a height is also a bugger for a flexbox layout. You want it to be **flex**ible, but may wish to set some bounds. — Chop, Nov 22 '16 at 07:38

Is there such a thing as overflow control with Flexbox?

My own case

Expected

Actual

CSS SitRep

1 Answers1