无法使容器响应垂直收缩

Question

我创建了一个 fiddle 来复制这里发生的事情。基本上，我有 outer/inner 模态 div，以及内部模态内的容器。

当容器内的内容太多无法显示在内部模态中时，我希望显示顶部并出现滚动条。当容器内的内容小到可以完整显示时，我希望它垂直居中。

然而，实际发生的是：如果内容大于内模态，则顶部部分被截掉。出现滚动条，但只能向下滚动；无法访问顶部的内容。

我想我的 CSS 一定是哪里出错了。如果有任何帮助，我将不胜感激！

CSS:
.page {
  height: 100vh;
  background-color: white;
}

.modal-background {
    position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 1.875rem 1rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-child {
  position: relative;
  background: #FFF;
  width: 80vw;
  height: 80vh;
  border-radius: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  overflow: scroll;
  transition: all ease 1s;
}

.foo-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

i.fa-times {
  position: absolute;
  font-size: 20px;
  top: -5px;
  right: 0;
}

.foo-header {
  width: 100%;
  display: grid;
  margin-top: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 5px;
  text-align: center;
}

.tab-one, .tab-two {
  margin: 0 0 20px;
  padding: 10px;
  width: 100%;
  background-color: violet;
  border-radius: 8px;
  text-align: center;
  color: #009DAE;
  font-weight: 700;
  transition: 0.3s ease-out;
}

.foo-index {
  width: 100%;
  text-align: left;
}

ul {
  list-style-type: none;
  display: grid;
  height: 100%;
  width: 100%;
  margin-top: 1.5rem;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 0;
}

HTML:
<div class="page">
  blah blah
  
  <div class="modal-background">
    <div class="modal-child">
      <div class="foo-container">
        <i class="fas fa-times"></i>
        <div class="foo-header">
          <div class="tab-one">
            <span>Tab One</span>
          </div>
          <div class="tab-two">
            <span>Tab Two</span>
          </div>
        </div>
        <div class="foo-index">
          <ul>
            <li>Sample Text</li>
            <-- if the # of <li>s is too great, .foo-header starts getting cut off -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

  please Add {float:left;} to **foo-index,foo-header** and  {display:block;} to foo-container 


.page {
      height: 100vh;
      background-color: white;
    }
    
    .modal-background {
        position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      padding: 1.875rem 1rem;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .modal-child {
      position: relative;
      background: #FFF;
      width: 80vw;
      height: 80vh;
      border-radius: 5px;
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      overflow: scroll;
      transition: all ease 1s;
    }
    
    .foo-container {
      position: relative;
      display: block;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;
      height: 100%;
    }
    
    i.fa-times {
      position: absolute;
      font-size: 20px;
      top: -5px;
      right: 0;
    }
    
    .foo-header {
      width: 100%;
      display: grid;
      float:left;
      margin-top: 1.5rem;
      align-items: center;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      grid-gap: 5px;
      text-align: center;
    }
    
    .tab-one, .tab-two {
      margin: 0 0 20px;
      padding: 10px;
      width: 100%;
      background-color: violet;
      border-radius: 8px;
      text-align: center;
      color: #009DAE;
      font-weight: 700;
      transition: 0.3s ease-out;
    }
    
    .foo-index {
      float:left;
      width: 100%;
      text-align: left;
    }
    
    ul {
      list-style-type: none;
      display: grid;
      height: 100%;
      width: 100%;
      margin-top: 1.5rem;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
     padding: 0;
}

无法使容器响应垂直收缩

Having trouble making container responsive to vertical shrinking

css

responsive-design