flexbox元素高度100％出现在父母之外

Question

因此，由于设计原因，我必须在此处使用flexbox，因此我需要BTN p元素像显示块一样，我设法通过另一个堆栈帖子进行操作，但是现在当我制作时"其他Divs"类100％，它不在主要的父母中，我不知道为什么？

#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;
}

<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>

从灰色框上方的示例中移到红色边框的外部？

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>