html-Flex grow 1不允许正确滚动

概述我遇到的是Flex的一个小问题.我正在尝试获得一个简单的布局(如链接的jsfiddle中所示).但是,当右侧的div(红色)溢出其高度时,该元素将在视口中溢出,并且仅当它在视口的高度中溢出时才可滚动.JSfiddle我很确定这是因为我使用的高度是：100％；包含很多元素,但我需要它们尽可能大(以完全填充视口高度).我想要的是将视口完全由以下三个部分填充：导航

我遇到的是Flex的一个小问题.我正在尝试获得一个简单的布局(如链接的Jsfiddle中所示).但是,当右侧的div(红色)溢出其高度时,该元素将在视口中溢出,并且仅当它在视口的高度中溢出时才可滚动.

JSfiddle

我很确定这是因为我使用的高度是：100％；包含很多元素,但我需要它们尽可能大(以完全填充视口高度).

我想要的是将视口完全由以下三个部分填充：导航,左侧栏和右侧内容(请参见下图).正确的内容部分在视口溢出时应在何处滚动.

因此,得出一个结论.这里的问题是,可滚动内容首先溢出视口,并且当div与视口高度相同时(看起来像),它就开始可滚动.我显然希望div在视口溢出时可滚动.

下图基本上描述了问题所在和我想要的内容.

我将如何实现？谢谢你的时间.

代码(在JSFiddle中也可用)

的HTML
    
      

  <div ID="content-container">    <div ID="content">      <div ID="left">        IM left      </div>      <div ID="right">        <div ID="inner">          IM RIGHT        </div>        IM RIGHT      </div>    </div>  </div></div>

的CSS

HTML,body {  height: 100%;  wIDth: 100%;  margin: 0;  padding: 0;  overflow: hIDden;}#main {  height: 100%;  background: black;  display: flex;  flex-direction: column;  justify-content: flex-start;  align-items: flex-start;  wIDth: 100vw;  height: 100vh;}#main nav {  background: orange;  wIDth: 100%;  height: 96px;}#main #content-container {  background: darkgreen;  color: white;  wIDth: 100%;  flex-grow: 1;  max-height: 100%;}#main #content-container #content {  display: flex;  flex-direction: row;  justify-content: flex-start;  align-items: flex-start;  height: 100%;  max-height: 100%;}#main #content-container #content #left {  background: darkblue;  wIDth: 30%;  height: 100%;}#main #content-container #content #right {  background: darkred;  height: 100%;  flex-grow: 1;  overflow-y: scroll;}#main #content-container #content #right #inner {  Font-size: 25rem;}

最佳答案您可以像下面那样简化代码：

body {  margin: 0;}#main {  height: 100vh; /*full height*/  background: black;  display: flex;  flex-direction: column;}#main nav {  background: orange;  height: 96px; /*fixed height*/}#content-container {  background: darkgreen;  color: white;  flex-grow: 1; /*fill the remaining height*/  min-height:0;  /*enable the shrink*/}#content {  display: flex;  flex-direction: row;  height: 100%;}#left {  background: darkblue;  wIDth: 30%;}#right {  background: darkred;  overflow:auto;}/*Irrelevant*/#inner {  Font-size: 25rem;}

<div ID="main">  <nav>    <ul>      <li>        <a href="/">Home</a>      </li>      <li>        <a href="/games">Games</a>      </li>      <li>        <a href="/create">Create</a>      </li>    </ul>  </nav>  <div ID="content-container">    <div ID="content">      <div ID="left">        IM left      </div>      <div ID="right">        <div ID="inner">          IM RIGHT        </div>        IM RIGHT      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html-Flex grow 1不允许正确滚动 全部内容，希望文章能够帮你解决html-Flex grow 1不允许正确滚动 所遇到的程序开发问题。

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