Flexbox元素高度100％超出父级？

Question

所以由于设计原因，我不得不在这里使用flexbox，我需要btn p元素才能像显示块一样，我设法通过另一个堆栈帖子，但现在当我制作＆＃34;其他div＆＃34 ;等级100％，它走出了主要的父母，我无法弄清楚为什么？

＆＃13;

＆＃13;

#outterWrapper {
  display: inline-block;
  height: 200px;
  border: 1px solid red;
}

#container {
  display: flex;
  height: 200px;
  flex-wrap: wrap;
}

#menu {
  display: flex;
  flex-basis: 100%;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 100%;
  width: 25%;
  background-color: grey;
  margin-right: 5px;
}

＆＃13;

<div id="outterWrapper">

  <div id="container">

    <div id="menu">

      <p>Btn</p>
      <p>Btn</p>
      <p>Btn</p>

    </div>

    <div class="otherDivs"></div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

从上面的示例开始，灰色框出现在红色边框之外？

Answer 1

您可以切换到列方向并具有以下内容：

#outterWrapper {
  display: inline-block;
  height: 200px;
  border: 1px solid red;
}

#container {
  display: flex;
  height: 200px;
  flex-direction:column;
}

#menu {
  display: flex;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 100%;
  width: 25%;
  background-color: grey;
  margin-right: 5px;
}

<div id="outterWrapper">

  <div id="container">

    <div id="menu">

      <p>Btn</p>
      <p>Btn</p>
      <p>Btn</p>

    </div>

    <div class="otherDivs"></div>

  </div>

</div>