Question

努力弄清楚我如何拥有一个带有标题（未知高度）和内容（可滚动）的Flexbox，它应该占用标题未使用的剩余空间。

如果我设置标题高度我没有问题，但因为我的标题可以有更多或更少的内容（或屏幕大小导致内容换行），我不能将其设置为固定高度。

示例图片http://i.imgur.com/rYGpp4a.jpg

关于如何实现上述任何想法？

Answer 1

html,body{
  height: 100%;
  margin: 0;
}

main{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  margin: auto;
}

header{
  background-color: #333;
  color: #eee;
}

article{  
  background-color: #eee;
  overflow-y: scroll;
  flex: 1;
}

<main>
  <header>Some Text</header>
  <article>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</article>
</main>

这应该有效，如果它不是你想要的，请在评论中告诉我

具有未知标题高度的CSS Flexbox（标题和内容[overflow：scroll]）

1 个答案: