html - 当使用 `position:fixed;` 和 `display: flex;` 的 css 组合时，内部元素的顶部被切掉并且无法访问

Question

我正在构建一个全屏模式，我试图在内容小于屏幕时将其垂直居中，并在高度大于容器高度时从顶部开始并允许滚动.我正在尝试使用 position:fixed 将容器定位在屏幕上，并使用 display:flex; align-items:center; 使内部 div 居中。当容器比内部 div 短时，内部 div 的顶部被切掉，即使我使用:overflow-y:scroll。

这是我的代码:

<div class="modal">
  <div class="inner-w">
      hello world 
      <div class="long-box">
    </div>
  </div>
</div>

.modal {
  position: fixed; 
  bottom: 70px; 
  top: 0; 
  left:0; 
  right: 0; 
  display: flex; 
  align-items: center; 
  padding: 15px; 
  overflow: scroll;
}
.inner-w {
  margin: 50px 0; 
  width: 100%; 
}
.long-box {
  height: 400px; 
  width: 100%; 
  border: 1px solid brown; 
}

这是一个 jsfiddle:https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR

Answer 1

添加到 .modal{flex-direction-column;} 现在你可以移除边距了

.modal {
  position: fixed; 
  bottom: 70px; 
  top: 0; 
  left:0; 
  right: 0; 
  display: flex; 
  flex-direction:column;
  align-items: center; 
  padding: 15px; 
  overflow: scroll;
}
.inner-w {
 
  width: 100%; 
}
.long-box {
  height: 400px; 
  width: 100%; 
  border: 1px solid brown; 
}

<div class="modal">
  <div class="inner-w">

      hello world 
      <div class="long-box">
      
    </div>
  </div>
</div>