Two scrolling blocks in flex container - css

Question

I need to build a card with two scrolling areas. Initial idea was to use flexbox so I came up with this:
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
min-width: 100px;
min-height: 0;
max-width: 80%;
max-height: 80%;
border: solid 1px black;
padding: 10px;
}
.photo {
background-color: silver;
margin-bottom: 10px;
aspect-ratio: 3;
}
.body {
display: flex;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
margin-right: 10px;
}
.title {
background-color: silver;
margin-bottom: 10px;
}
.text {
flex: 1;
background-color: cyan;
min-height: 0;
overflow: auto;
}
.photos {
width: 100px;
min-height: 0;
overflow: auto;
}
.photos * ~ * {
margin-top: 10px;
}
.thumbnail {
background-color: lightgreen;
aspect-ratio: 3;
}
<div class="card">
<div class="photo">Photo</div>
<div class="body">
<div class="content">
<div class="title">Title</div>
<div class="text" contenteditable>
Full text<br>
Can be multiline and with vertical scroll
</div>
</div>
<div class="photos">
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
</div>
</div>
</div>
link to fiddle: https://jsfiddle.net/SkyLight/jxobz8qn/
The card has maximum width and height and Full text section (cyan one) can have pretty long content so that it should have scroll when needed. Thumbnails section can also have big amount of items so will also need to have scroll.
I know that overflow needs block to have height set in order to work but I can't figure out how to set it properly because the content should be limited mainly by Card's max size.
So can it be achieved with flexbox only or I'll need some other stuff? Would like to achieve the result with pure css.

Answer 1

Make the card element a flexbox container then use flex:1 on the body:
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
min-width: 100px;
min-height: 0;
max-width: 80%;
max-height: 80%;
border: solid 1px black;
padding: 10px;
/* added */
display: flex;
flex-direction: column;
/**/
}
.photo {
background-color: silver;
margin-bottom: 10px;
aspect-ratio: 3;
}
.body {
display: flex;
flex:1; /* added */
min-height:0; /* added to make sure the content will shrink */
}
.content {
flex: 1;
display: flex;
flex-direction: column;
margin-right: 10px;
}
.title {
background-color: silver;
margin-bottom: 10px;
}
.text {
flex: 1;
background-color: cyan;
min-height: 0;
overflow: auto;
}
.photos {
width: 100px;
min-height: 0;
overflow: auto;
}
.photos * ~ * {
margin-top: 10px;
}
.thumbnail {
background-color: lightgreen;
aspect-ratio: 3;
}
<div class="card">
<div class="photo">Photo</div>
<div class="body">
<div class="content">
<div class="title">Title</div>
<div class="text" contenteditable>
Full text<br>
Can be multiline and with vertical scroll
</div>
</div>
<div class="photos">
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
<div class="thumbnail">Thumbnail</div>
</div>
</div>
</div>