I have the following layout:
.wrapper { width: 250px; border: 1px solid #000000;}.container { display: inline-flex; flex-direction: row; min-width: 100%;}.child { min-width: fit-content; flex-basis: 0px; flex-shrink: 1; margin: 5px;}.first { background: yellow; flex: 0 1 auto;}.second { background: red; flex: 0 1 1;}.third { background: blue; flex: 0 1 1;}<div class="wrapper"> <div class="container"><div class="first child">first</div><div class="container child second"><div class="child"> child</div><div class="child"> child</div><div class="child"> child</div><div class="child"> child</div><div class="child"> child</div></div><div class="third child">third</div></div></div>My problem is that, in the case of overflowing, i need to show a scroll on the second child alone, meaning the first and third child should always be visible, how can i do this?