使用 Flexbox 具有 100% 高度容器的可滚动卡片答案

【问题标题】：Scrollable cards with 100% height container using Flexbox使用 Flexbox 具有 100% 高度容器的可滚动卡片
【发布时间】：2019-10-29 05:33:12
【问题描述】：

我想要一个 , 标签，它占据了 100% 的页面和我的卡片，当它们的内容溢出时可以滚动。但我无法以正确的方式处理卡片溢出：滚动条不可滚动。我所有的容器都使用 flexbox 规则。

我创建了一个 codepen 来向您展示这个问题： https://codepen.io/YseopCSS/pen/dBGPYb

你能帮帮我吗？

<main class="edit-report">
  <header class=header>
    header
  </header>  
  <section class="main__content">  
    <div class="global-filter">global-filter</div>
    <div class="edit-report__edition">
      <div class="edit-report__card data">data</div>
      <div class="edit-report__card table">table</div>
      <div class="edit-report__card report">
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
        Report<br>
      </div>
    </div>  
  </section>  
</main>

html, body {
  height:100%;
  margin: 0;
  padding: 0;
}

.edit-report {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  padding: 15px 50px;
  background:green;
}

.main {
  &__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    background: yellow;
  }
}

.global-filter {
  height: 100px;
  background: purple;
}

.edit-report {

  &__edition {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
  }

  &__card {
    flex: 1 1 25%;
    min-height: 100px;

    &.data {
      background: pink;
    }

    &.table {
      background: violet;
    }

    &.report {
      background: cyan;
      overflow-y: scroll;
    }
  }

}

【问题讨论】：

标签： css scroll sass flexbox overflow

【解决方案1】：

检查您的代码后，我意识到问题出在edit-report__card.report 上的高度，它没有定义高度，因此，当前高度为“2106px”，因此滚动不起作用，即使当，你用“overflow-y:scroll;”强制它，为了修复它只需添加这一行：

.edit-report__card.report {  
background: cyan;   
overflow-y: scroll;   
height: 100%;

}

【讨论】：

【解决方案2】：

CSS，

这支笔或许能帮到你。

<ul>
  <li>
    <img src="http://placekitten.com/280/330"/>
  </li>

  <li>
    <img src="http://placekitten.com/220/300"/>
  </li>

  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>

  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>
  <li>
    <img src="http://placekitten.com/140/210"/>
  </li>

ul {
  display:flex;
  flex-flow: row wrap;

  /* allow scrolling of flex container */
  overflow-x:auto; 

  /* overwrite list container styles */
  margin:2px;
  padding:1em;

  /* color for some visual of the spacing */
  box-shadow:0 0 10px black inset;
}

li {
  /* remove list style bullets */
  list-style-type:none;
  width: 40%;

  /* vertical center with 10px on left and right */
  width: 23%;
  padding: 1%
}
li img {
  width: 100%;
}

https://codepen.io/rusticblonde/pen/QXyjKy

【讨论】：