无法使容器响应垂直收缩

Posted 2023-03-06

【中文标题】无法使容器响应垂直收缩

【英文标题】：Having trouble making container responsive to vertical shrinking

【发布时间】：2022-01-22 14:30:24

【问题描述】：

我创建了一个小提琴来复制这里发生的事情。基本上，我有外部/内部模式 div，以及内部模式内部的容器。

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

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

我想我的 CSS 一定是哪里出了问题。非常感谢任何帮助！

http://jsfiddle.net/d16xc8vm/

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>

【参考方案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;

【讨论】：

请将 float:left; 添加到 foo-index,foo-header 和 display:block; 到 foo-container

谢谢！我能问一下为什么会修复它吗？我认为 display:flex 也应该将内容推送到视图中

display 属性用于设置以下两个值之一：flex 和 inline-flex。如果将 display 设置为 flex，则容器内的所有子项都将成为 flex 项。它们将自动排列成一行，每个元素的宽度与其内容相同。 flex 容器跨越它自己的宽度，每个子容器都必须适应容器的宽度。如果将 display 设置为 inline-flex，它会使 flex 容器表现得像一个内联元素。