Question

我希望标签占据页面和内容的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;
    }
  }

}

Answer 1

检查代码后，我意识到问题是edit-report__card.report上的高度，没有定义高度，因此，当前高度为“ 2106px”，因此滚动无法正常工作，即使是，您也可以使用“ overflow-y：scroll;”来强制它，要修复它，只需添加以下行：

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

}

Answer 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

使用Flexbox的高度为100％的可滚动卡

2 个答案: