Flexbox父容器与其子项不一起增长？里面的内容溢出了父div

Question

JsFiddle demonstrating the problem

我在容器内有两个div，A和B.随着B的内容增长，我希望容器和A随之增长。但是，B中的内容溢出，而不是这样做，这会导致页面布局中断。

所有高度均设为100％。为什么内容溢出？

html,
    body {
      height: 100%;
    }
    .side {
      flex: 0 0 250px;
      background-color: blue;
      height: 100%;
    }
    .mycontainer {
      display: flex;
      height: 100%;
    }
    .main {
      padding: 0 20px 0 20px;
      flex: 1 1 auto;
      height: 100%;
    }

<div class="mycontainer">
  <div class="side"></div>
  <div class="main">
    <div>
      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>
      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>
      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>
      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>      <br>
   </div>

  </div>
</div>

Answer 1

只需从容器和侧面移除高度，或将其设置为自动：

溢出的原因是100％是html的初始大小。

html,
    body {
      height: 100%;
    }
    .side {
      flex: 0 0 250px;
      background-color: blue;
      height: auto;
    }
    .mycontainer {
      display: flex;
      height: auto;
    }
    .main {
      padding: 0 20px 0 20px;
      flex: 1 1 auto;
      height: 100%;
      background: green;
    }
.expand {
  height: 400px;
  transition: height 0.3s;
  }
.expand:hover {
  height: 200px;
}

<div class="mycontainer">
  <div class="side"></div>
  <div class="main">
    <div>
     <div class="expand"></div>
    </div>

  </div>
</div>

ps：对于演示块调整大小，只需使用扩展器，以减少噪声代码。

Answer 2

您还可以在父级上设置最小高度（例如，正文{min-height：100vh;}）。这样，它将允许父容器根据需要继续增长。