html - 当父元素高度设置为 vh 时，内部内容和滚动条被兄弟元素的高度截断

Question

我正在尝试创建一个占视口(viewport)固定百分比的侧边栏。在侧边栏内，我想要一个固定在顶部的元素，而如果其他内容占用的垂直空间大于侧边栏高度，则它会滚动。

在此示例中，h1 元素保留在父元素的顶部，而其余内容 .inner 可以滚动。 .inner 中的内容和滚动条被 h1 元素的高度截断。

如何显示所有内容和滚动条？

* { box-sizing: border-box; margin: 0; padding: 0; }

body: {
  height: 100vh; 
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: 'left right';
    justify-content: space-around;
    grid-gap: 12px;
    width: 90vw;
    height: 100vh;
    margin: auto;
}

.left {
  grid-area: left;
}

.right {
  gird-area: right
}

.side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.outer {
  height: 90vh; 
  margin: auto;
  position: relative;
  border: 1px solid blue;
  overflow:hidden;
}

.inner {
  height: 100%;
  overflow: auto;
}

h1 {
  height: 100px;
  background: lightgrey;
}

p {
  height: 100px;
}

<div class="grid-container">
  <div class="left">
    <div class="side">
      <div class="outer">
        <h1>other content</h1>
        <div class="inner">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
         </div>
       </div>
    </div>

  </div>
  <div class="right"></div>      
</div>

Answer 1

您希望尽可能避免在事物上设置明确的高度。这往往会咬你。为你的 flex 布局设置规则，让它做它自己的事情。如果您在某处需要空格，请保持简单并将其添加到框的内容中，而不是框本身。通过分离布局和内容的关注点，您可以更轻松地提取一点内容并替换它，而无需进入布局的 CSS。

滚动到 CSS 以获取提示。

* { box-sizing: border-box; margin: 0; padding: 0; }

body: {
  height: 100vh; 
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-areas: 'left right';
    justify-content: space-around;
    grid-gap: 12px;
    width: 90vw;
    height: 100vh;
    margin: auto;
}

.left {
  grid-area: left;
}

.right {
  gird-area: right
}

.side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.outer {
  height: 90vh; 
  margin: auto;
  position: relative;
  border: 1px solid blue;
  display: flex; /* <--------------- change */
  flex-direction: column; /* <--------------- add */
}

.inner {
  /* height: 100%; <--------------- remove */
  overflow: auto;
}

h1 {
  flex: 0 0; /* <--------------- change */
  background: lightgrey;
}

p {
  height: 100px;
}

<div class="grid-container">
  <div class="left">
    <div class="side">
      <div class="outer">
        <h1>other content</h1>
        <div class="inner">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
         </div>
       </div>
    </div>

  </div>
  <div class="right"></div>      
</div>