Flex增长1不允许正确滚动

问题描述 投票:3回答:4

我正在遇到,我认为,这是一个很小的问题。我正在尝试获得一个简单的布局(如链接的jsfiddle中所示)。但是,当右侧的div(红色)溢出其高度时,该元素在视口中溢出,并且只有在溢出视口高度时才可滚动。

JSfiddle

我很确定这是因为我在很多元素中使用height: 100%;,但我需要它们尽可能大(完全填充视口高度)。

我想要的是视口将被这三个部分完全填充:导航,左侧边栏和右侧内容(请参见下图)。右边内容部分在溢出视口时应该可滚动的位置。

What I want

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

什么是错的,我想要的基本上在下图中描述。 Left: what's wrong. Right: What I want

我怎么做到这一点?谢谢你的时间。

代码(也可在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;
}
html css css3 scroll flexbox
4个回答
1
投票

您可以简化代码,如下所示:

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>

1
投票

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main {
  height: 100%;
  background: black;
  display: flex;
  flex-wrap: wrap;
}

#main nav {
  background: orange;
  width: 100%;
  height: 96px;
}

#main #content-container {
  background: darkgreen;
  color: white;
  width: 100%;
  height: calc(100% - 96px);
  max-height: calc(100% - 96px);
}

#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%;
  width: 70%;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-all;
}

#main #content-container #content #right {
  font-size: 27em;
}
<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">
        IM RIGHT
      </div>
    </div>
  </div>

</div>

0
投票

一种解决方案可能是在使用#content定义calc(100% - 96px)的高度时考虑导航元素的高度,96px是导航元素的高度:

#main #content-container #content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(100% - 96px);
  max-height: calc(100% - 96px);
}

0
投票
#main #content-container #content #right {
  overflow-y: auto;
}
© www.soinside.com 2019 - 2024. All rights reserved.