使用flex

Question

我已经使用CSS flex来并排显示两个包含在包装内的div，我一直在努力使#myClippetWrapper内部设置高度，所以在{{1}的子元素中我可以设置#myClippetWrapper。

但正如你可以看到，在height: 100%;内的所有元素下面运行代码片段，在主要部分之外，它们都悬挂在主要内容div之外？

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

#myClippetWrapper

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

Answer 1

在许多情况下，flexbox无需使用百分比高度。

Flex容器的初始设置为align-items: stretch。这意味着在flex-direction: row中（与代码中一样），flex项会自动扩展容器的整个高度。

或者，您可以使用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

Answer 2

添加

 box-sizing: border-box;

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

Answer 3

添加box-sizing属性..

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

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;
  float: left;
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

设置您的一个重要因素 display: flex; 填充和高度可以使一对讨厌的夫妇; 考虑这个例子：

display: flex;
height: 100%;
padding-top: 1vh;

这实际上会使您的元素成为页面高度，加上视图高度的 1%，当然还会为您提供一个比其父元素高的子元素。

<块引用>

这不是对您问题的直接回答，而是针对在此处寻找其子元素可能会起作用的原因的人的回答。