在嵌套的flexbox列中滚动内容（具有动态高度）

Question

我有一个带有全局页眉和页脚（具有动态高度）的页面，在页面剩余区域的中心有一张卡片，该卡片根据卡片中的内容而缩小或增大。

卡本身还具有页眉和页脚，我需要在页面上保持可见，而中间的内容是滚动的部分。 我最困难的时间试图弄清楚如何做到这一点。

编辑：我知道我可以通过给卡片内容设置最大高度来实现这一点，但是由于全局和卡片页眉和页脚的所有高度都是动态的，所以我不知道在任何给定时间给出的最大高度是多少？ 还是我需要一个JavaScript解决方案来完成此任务？

Codepen： https ：//codepen.io/Yorria/pen/yWaWxg

屏幕截图：

模型：

 html, body { padding: 0px; margin: 0px; background-color: pink; } .global-container { height: 100vh; display: flex; flex-direction: column; } .card-wrapper { flex-direction: row; box-sizing: border-box; display: flex; place-content: center; align-items: center; flex: 1 1 100%; max-height: 100%; overflow-y: auto; } .card-wrapper-inner { flex: 1 1 100%; box-sizing: border-box; max-width: 70%; max-height: 100%; } .card { display: flex; flex-direction: column; background-color: white; padding: 20px; } .card-content { flex: 1; overflow-y: auto; background-color: #ddd; } /* ignore: forcing overflow */ .overflow-content { height: 2000px; } .global-info { background-color: green; margin: 0px; padding: 16px; font-size: 20px; font-weight: bold; color: white; } 

 <div class="global-container"> <div class="global-info">Global Header</div> <div class="card-wrapper"> <div class="card-wrapper-inner"> <div class="card"> <div>Card Header</div> <div class="card-content"> <div class="overflow-content"> I want only this content to scroll, and to shrink if it doesn't take up the entire page. <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur. </div> </div> <div>Card Footer</div> </div> </div> </div> <div class="global-info">Global Footer</div> </div> 

Answer 1

您必须为卡片div设置最大高度，并将卡片内容设置为滚动

此处的笔示例： https : //codepen.io/anon/pen/xNEoVQ

html,
body {
  padding: 0px;
  margin: 0px;
  background-color: pink;
}

.global-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  align-items: center;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
}

.card-wrapper-inner {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 70%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: white;
  max-height: 70vh;
}

.card-content {
  flex: 1;
  background-color: #ddd;
  overflow: scroll;
  height:50vh;
}

/* ignore: the overflow content itself */
.overflow-content {
  height: 2000px;
}

.global-info {
  background-color: green;
  margin: 0px;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

Answer 2

帮助浏览器将所有高度传递到后代容器。 他们很难通过.card-wrapper-inner 。

只需添加display: flex到该类。 该命令激活align-items: stretch default，它消耗了父级的所有可用高度，并使子级可用。

换句话说，链中缺少链接。 全高不能超过一个水平。 通过将.card-wrapper-inner为flex容器，高度规则将从顶部向下传递。

修改后的代码笔

 html, body { padding: 0px; margin: 0px; background-color: pink; } .global-container { height: 100vh; display: flex; flex-direction: column; } .card-wrapper { flex-direction: row; box-sizing: border-box; display: flex; place-content: center; align-items: center; flex: 1 1 100%; max-height: 100%; overflow-y: auto; } .card-wrapper-inner { display: flex; /* new */ flex: 1 1 100%; box-sizing: border-box; max-width: 70%; max-height: 100%; } .card { display: flex; flex-direction: column; background-color: white; padding: 20px; } .card-content { flex: 1; overflow-y: auto; background-color: #ddd; } /* ignore: forcing overflow */ .overflow-content { height: 2000px; } .global-info { background-color: green; margin: 0px; padding: 16px; font-size: 20px; font-weight: bold; color: white; } 

 <div class="global-container"> <div class="global-info">Global Header</div> <div class="card-wrapper"> <div class="card-wrapper-inner"> <div class="card"> <div>Card Header</div> <div class="card-content"> <div class="overflow-content"> I want only this content to scroll, and to shrink if it doesn't take up the entire page. <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur. </div> </div> <div>Card Footer</div> </div> </div> </div> <div class="global-info">Global Footer</div> </div>