How to fix height in div with overflow scroll - sass

Question

I can't apply fixed height with scroll. When I fixed height container blow up all div's height. How can I fixed height div? Fixed tree items in container. I made fix container height '200px' but it doesn't work. Maybe there is something simple but I can't see.
Here's my simple code:
<div class="container-Atanan">
<div class="container-Atanan-Header">
<i class="fas fa-american-sign-language-interpreting fa-2x"></i>
<div class="container-Atanan-Header-Title"><span>Başlık</span></div>
</div>
<div class="container-Atanan-ListItem">
<a class="listItem" href="#">
<div class="container-Atanan-ListItem-Avatar">
<img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="">
</div>
<div class="container-Atanan-ListItem-Content">
<div class="Content-Title">Lorem ipsum.</div>
<div class="Content-Subtitle">
<span>Lorem ipsum dolor sit. <span class="italic">-25.2.2019</span></span>
<span class="italic oldline">Lorem ipsum dolor sit amet. </span>
</div>
</div>
</a>
</div>
and my scss:
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height: 80%;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display: inline-flex;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
display: inline-flex;
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
and my fiddle

Answer 1

Use this instead
display:grid;
grid-template-columns :max-content max-content;
In &-header and remove inline-flex from &-ListItem and you can set the height in .container-Atanan to any value you want
body{
background-color:#FEFCFC;
}
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height:350px;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display:grid;
grid-template-columns :max-content max-content;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
JSFIDDLE