I have the following snippet with 2 divs in a flex container. The 1st one has 2 sub divs with a fix size (to mock content), the second one has only 1 mock content. Currently the height of the container is equals to the height of the 1 div (and the height of the second div is enlarge to the same height while it could be smaller).
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .content { width: 100px; height: 100px; border: 2px red dotted; } .container { display: flex; }</style></head><body><div class="container"><div style="flex: 1;"><div><div class="content"></div></div><div><div class="content"></div></div></div><div style="flex: 1;"><div class="content"></div></div></div></body></html>So now, I would like to force the height of the container (automatically) with the height of the second div (and then force a scroll on the 1st div). How to do it ? Even setting max-height:min-content on the container didn't work.
The result (visually) should be equivalent to this (but not using fixed height)
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .content { width: 100px; height: 100px; border: 2px red dotted; } .container { display: flex; }</style></head><body><div class="container"><div style="flex: 1;overflow-y: auto;max-height: 103px;"><div><div class="content"></div></div><div><div class="content"></div></div></div><div style="flex: 1;height: fit-content;"><div class="content"></div></div></div></body></html>From this 
To this 