使用 flex 扩展到父元素外部的子元素

Question

我已经使用 CSS flex 并排显示两个包含在包装器中的 div，我一直在尝试在 #myClippetWrapper 中设置高度，因此在 #myClippetWrapper 的子元素中 --- 我可以设置 height: 100%; 。

但是正如您从运行下面的代码片段中看到的那样，所有内部元素 #myClippetWrapper 都在主要部分之外，它们都挂在主要内容 div 之外？

我不想使用 overflow: auto 因为我不想要滚动条，我只需要 #myClippetWrapper 的子元素不在主要部分/div 之外。

 main {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background-color: red;
  width: 100%;
  max-width: 50%;
  height: auto;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  padding: 10px;
  width: 250px;
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#codeAndNotesWrapper {
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  flex-basis: 100%;
  height: 100%;
}

#codeView {
  padding: 10px;
  /*flex: 0 0 40%;*/
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#noteView {
  padding: 10px;
  /*flex: 1;*/
  height: 100%;
  background-color: #222222;
}

#codeNotesEditor {
  height: 100%;
  background-color: #EAEAEA;
}

 <main>
  <div id="myClippetWrapper">

    <div id="clippetNav">

    </div>

    <div id="codeAndNotesWrapper">

      <div id="codeView">

      </div>

      <div id="noteView">

        <div id="codeNotesEditor">

        </div>

      </div>

    </div>

  </div>
</main>

原文由 Erdss4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在许多情况下，flexbox 消除了使用百分比高度的需要。

弹性容器的初始设置是 align-items: stretch 。这意味着在 flex-direction: row （就像在你的代码中）弹性项目将自动扩展容器的整个高度。

或者，您可以使用 flex-direction: column 然后将 flex: 1 应用到子项，这也可以使弹性项目扩展父项的整个高度。

 main {
  max-width: 50%;
  margin: 10px auto;
  padding: 8px;
  background-color: red;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  display: flex;
  padding: 10px;
  width: 250px;
  margin-right: 10px;
  background-color: #222222;
}

#codeAndNotesWrapper {
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  display: flex;
  flex-basis: 100%;
}

#codeView {
  display: flex;
  padding: 10px;
  margin-right: 10px;
  background-color: #222222;
}

#noteView {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #222222;
}

#codeNotesEditor {
  flex: 1;
  background-color: #EAEAEA;
}

 <main>
  <div id="myClippetWrapper">
    <div id="clippetNav"></div>
    <div id="codeAndNotesWrapper">
      <div id="codeView"></div>
      <div id="noteView">
        <div id="codeNotesEditor"></div>
      </div>
    </div>
  </div>
</main>

jsFiddle

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加

 box-sizing: border-box;

给你的孩子元素。这将使填充显示在框的内部而不是外部，并且不会增加整体尺寸。

原文由 Steven Johnston 发布，翻译遵循 CC BY-SA 3.0 许可协议