Flex nested item overflow - html

Question

I want to have the part under "foo" totally scrollable, yet I haven't been able to achieve it using flexbox. I've tried it with min-height, but without any success.
https://jsfiddle.net/szd5tvfc/2/
$('.ui.dropdown')
.dropdown();
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>

Answer 1

For the overflow property to work, there needs to be a defined height somewhere along the line. Otherwise, how does the property know where to overflow? It will just keep extending the box.
Try this.
.ul.vertical.menu { height: 100vh; }
.overflowing.item { flex-basis: 1px; flex-grow: 1; }
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
}
.ui.vertical.menu>.overflowing.item {
flex-basis: 1px;
flex-grow: 1;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>
jsFiddle demo

Answer 2

Add this CSS to your code:
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: stretch;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
flex-shrink: 1;
flex-grow: 1;
}
It uses justifycontent: strech; and the flex-shrink/flex-grow properties.
Here is the link to a fully functional fiddle: jsfiddle.
Note that the flex parent's height can be adjusted freely and it won't cause any sort of extra scrollbars or anything.

Answer 3

I'm not sure if I understood what you want but to get scroll you need to set max-height instead min-height.
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
max-height: 200px;
overflow: auto;
}
Check the changes below
https://jsfiddle.net/r4bxu5ep/