弹性嵌套项溢出

Question

我想在"foo"；完全可滚动，但我还没能使用flexbox实现它。我用min-height尝试过，但没有成功。

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

要使overflow属性工作，需要在沿线的某个位置定义一个高度。否则，属性如何知道溢出位置？它只会继续延长盒子。

试试这个。

.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演示

Answer 2

将此CSS添加到代码中：

.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;
}

它使用justifycontent: strech;和flex-shrink/flex-grow属性。

这是一个功能齐全的fiddle的链接：jsfiddle。

请注意，flex父项的高度可以自由调整，不会导致任何额外的滚动条或其他任何东西

Answer 3

我不确定我是否理解您想要什么，但要获得滚动，您需要设置max-height而不是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;
}

检查下方的变化

https://jsfiddle.net/r4bxu5ep/