使子Flexbox容器可滚动

Question

我想使用一个使用flexbox的全高应用程序，在我的情况下，白色区域是一个Flex项目需要可滚动，但它似乎不起作用，请参阅this jsfiddle。

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.left {
  background: yellow;
  margin: 10px;
  flex: 0 0 50px;
}
.right {
  background: blue;
  margin: 10px 10px 10px 0;
  flex: 1 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  flex: 0 0 auto;
  margin: 10px;
  background: #999999;
}
.context {
  flex: 1 0 auto;
  overflow-y: auto;
  margin: 0 10px 10px 10px;
  background: white;
}

<header style='background: red; flex: 0 0 auto'>
  This is Mmain header
</header>
<main style='background: green; flex: 1 0 auto; display:flex;'>
  <div class='left'>
    left pannel
  </div>
  <div class='right'>
    <div class='sub-header'>
      This is sub header
    </div>
    <div class='context'>
      <div style='height: 3000px;'>

      </div>
    </div>
  </div>
</main>

如何使白色区域可滚动？

Answer 1

＃1 - 使用position: absolute

防止超长div延伸其父级的一种简单方法是使其position: absolute并相对于其.context父级。

• body被赋予100vh而main被赋予100%的初始高度，该高度会缩小以均匀地贴合身体

  < / LI>

• 标题为flex: 0 0 25px，因此将保持其固定高度

工作示例

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  background: red;
  flex: 0 0 25px;
}
main {
  background: green;
  display: flex;
  flex: 1 1 100%;
}
.left {
  background: yellow;
  flex: 0 0 50px;
  margin: 10px;
}
.right {
  background: blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  background: #999999;
  margin: 10px;
}
.context {
  background: white;
  overflow-y: scroll;
  margin: 0 10px 10px;
  position: relative;
  flex: 1;
}
.context > div {
  height: 3000px;
  position: absolute;
}

<header>
  This is main header
</header>
<main>
  <div class='left'>
	left panel
  </div>
  <div class='right'>
	<div class='sub-header'>
	  This is sub header
	</div>
	<div class='context'>
	  <div>
		Super long div
	  </div>
	</div>
  </div>
</main>

＃2 - 原始 - 灵活的高度

要点：

• 标题和主要元素不需要是body的子元素。它们可以通过灵活的高度进行控制。

• 在viewport height units (vh)中为header和main提供一个高度。确保标题+ main = 100

的高度

• .context获取overflow-y: scroll。没有其他元素需要溢出属性

• .context和.sub-header在此示例中删除了flex属性。如果使用了flex属性，则在上下文div上没有初始值auto，否则溢出滚动将中断并溢出视口。

工作示例

* {
  margin: 0;
  padding: 0;
}
header {
  background: red;
  height: 10vh;
}
main {
  background: green;
  display: flex;
  height: 90vh;
}
.left {
  background: yellow;
  flex: 0 0 50px;
  margin: 10px;
}
.right {
  background: blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  background: #999999;
  margin: 10px;
}
.context {
  background: white;
  overflow-y: scroll;
  margin: 0 10px 10px;
}
.context > div {
  height: 3000px;
}

<header>
  This is main header
</header>
<main>
  <div class='left'>
	left panel
  </div>
  <div class='right'>
	<div class='sub-header'>
	  This is sub header
	</div>
	<div class='context'>
	  <div>
		Super long div
	  </div>
	</div>
  </div>
</main>

Answer 2

只需要更改CSS：overflow-y: scroll;而不是overflow-y: auto;