html – 使用flex扩展父元素之外的子元素

概述我已经使用CSS flex来并排显示两个包含在包装内的div,我一直在努力让#myClippetWrapper内部设置高度,所以在#myClippetWrapper的子元素中我可以设置高度：100 ％;. 但正如你可以看到,从运行下面的代码片段#myClippetWrapper中的所有元素走到主要部分之外,它们都悬挂在主要内容div之外？ 我不想使用overflow：auto因为我不想在那里使用滚 我已经使用CSS flex来并排显示两个包含在包装内的div,我一直在努力让#myClippetWrapper内部设置高度,所以在#myClippetWrapper的子元素中我可以设置高度：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>

解决方法 在许多情况下,flexBox无需使用百分比高度.

flex容器的初始设置是align-items：stretch.这意味着在flex-direction：row(就像你的代码中)flex项会自动扩展容器的整个高度.

或者,您可以使用flex-direction：列,然后将flex：1应用于子项,这也可以使flex项扩展父项的完整高度.

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

总结

以上是内存溢出为你收集整理的html – 使用flex扩展父元素之外的子元素全部内容，希望文章能够帮你解决html – 使用flex扩展父元素之外的子元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。