有没有Flexbox的溢出控制这样的东西？

Question

我可能会遗漏一些非常基本的内容，但我找不到如何使用Flexbox来控制溢出。

有没有办法确保Flex容器不会比它的flex父级更大，尽管有任何大图像/列表/ ...？

我无法重现我的确切案例，但下面的案例显示了图片如何造成严重破坏，而max-width / max-height或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>

我知道正确的解决方案是重写应用程序的所有flexbox结构（一些遗留，快速完成的工作等等），但这必须等待，因为我们现在非常匆忙。 / p>

我自己的案例

编辑：这是困扰我的案例。我无法在小提琴中迅速重现整个结构，但你可能会从我之前的尝试中获得要点。

预期

这是我的布局应该是这样的，以及在我从左栏删除所有有问题的<li>之后它的样子。

实际

左列是无序列表。某些<li>的内容可能会变得太长，从而导致左侧菜单变大并扩散到应该保证的范围内。

在一种情况下，我们在<li>中有一个（宽）图像。然后整个父母被加宽，超出屏幕，无法滚动。我们应该在标题栏右侧的操作按钮将无法访问。

CSS SitRep

我们对列表中的所有overflow: hidden和<li>以及每个容器<div>都有flex-basis: 0个规则。

Answer 1

是的，使用height代替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>