Scrollable cards with 100% height container using Flexbox - css

Question

I would like a , tags which take 100% of the page and my cards to be scrollable when their contents are overflowing. But I can't handle the cards overflow the right way: the scrollbar isn't scrollable. All my containers use flexbox rules.
I've created a codepen to show you the issue:
https://codepen.io/YseopCSS/pen/dBGPYb
Can you help me please ?
<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

After checking your code, I realized the problem was the height on the edit-report__card.report, it does not have a height defined, thanks to that, the current height is "2106px", hence the scroll is not working, even when, you force it with "overflow-y: scroll;", in order to fix it just add this line:
.edit-report__card.report {
background: cyan;
overflow-y: scroll;
height: 100%;
}

Answer 2

CSS,
This pen maybe able to help you.
<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