I need to implement overflow behavior (wrap or scroll for internal container in case of his overflow by children) but I can't. It's look like that internal container doesn't feel overflow... If I set height explicitly for it, it will work. But I would like to do it without such explicitly setting. Is it possible? what do you mean?
<div class="mega-outer"> <div class="extra-pre-outer"><div class="test"></div> <div class="extra-outer"><div class='outer'><div class="no-flex1"></div><div class="no-flex2"></div> <div class="group"> <div class="item"></div><div class="item"></div><div class="item"></div> <div class="item"></div><div class="item"></div><div class="item"></div></div></div></div></div></div>.outer { display: flex; flex-direction: column; background-color: green; opacity: 0.3; flex-grow: 1;}.test { height: 20px; background-color: purple;}.group { display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 1; overflow-y: auto; }.item { border: 1px solid black; background-color: blue; min-height: 40px;}.no-flex1 { height: 50px; background-color: red; flex-shrink: 0;}.no-flex2 { height: 30px; flex-shrink: 0; background-color: yellow;}.extra-outer { display: flex; flex-direction: column; flex-grow: 1;}.extra-pre-outer { flex-grow: 1; display: flex; flex-direction: column;}.mega-outer { display: flex; flex-direction: column; width: 250px; height: 300px;}
