将div放在包装器中，其中一个必须在内容溢出时使用y滚动条

Question

我正在尝试完成以下布局，但是我遇到了描述框高度定义的问题。我试图避免使用javascript。

现在我的包装器和标题栏都正常工作，标题和描述div嵌套在包装器div中：

#wrapper{
   position: fixed;
   right: 0;
   width: calc(100vw - 1.51 * 95vh - 5vh);
   top: calc(40px + 2.5vh + 2.5vh);
   height: calc(100vh - 40px - 40px);
}

#title{
   width: 100%;
   height: auto;
   top: calc(2.5vh + 40px + 2.5vh + 5vh);
}

说明div怎么样？有人能指出我正确的方向吗？

谢谢！

Answer 1

Flexbox可以做到这一点。

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

header {
  background: lightblue;
}

.content {
  flex: 1;
  overflow-y: auto;
  background: orange;
}

.spacer {
  height: 2000px;
  /* for demo purposes */
}

<div class="container">
  <header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur magnam labore laboriosam dolores, fugit ipsum quibusdam, aperiam totam itaque soluta debitis cumque provident repudiandae.</header>
  <div class="content">
    <div class="spacer"></div>
  </div>
</div>