Html 溢出滚动条-y不适用于flexbox

当新的div框（

.dialog-box

）添加到父容器（

.dialog-container

）时，我试图将div“堆叠”在彼此的顶部

要堆叠元素，我在父级上使用以下命令：

display: flex;
flex-direction: column;
justify-content: flex-end;

我想滚动该容器以查看溢出的

未滚动

两个箱子：（按预期从下到上装满容器）：


六个框（扩展到容器高度之外，应滚动）：


SCSS：

HTML:

尝试更改
显示：flex至<代码>显示：柔性框

这将为您提供一个实际滚动的滚动条。此外，您的示例div都缺少结束标记



9
8.
7.
6.
5.
4.
3.
2.
1.
.对话框容器{
边框：4倍实心rgba（255、255、255、.4）；
边界半径：5px；
宽度：300px；
高度：340px；
位置：相对位置；
顶部：50px；
保证金：0自动；
z指数：5；
显示器：柔性盒；
弯曲方向：立柱；
证明内容：柔性端；
溢出y：自动；
背景色：青色；
.对话框{
宽度：90%；
背景：黑色；
边缘底部：20px；
边界半径：8px；
边框：5px纯红；
颜色：绿色；
文本对齐：居中；
左边距：5px；
填充物：5px；
显示：内联块；
p{}
}
}
尝试更改
显示：flex至<代码>显示：柔性框

这将为您提供一个实际滚动的滚动条。此外，您的示例div都缺少结束标记



9
8.
7.
6.
5.
4.
3.
2.
1.
.对话框容器{
边框：4倍实心rgba（255、255、255、.4）；
边界半径：5px；
宽度：300px；
高度：340px；
位置：相对位置；
顶部：50px；
保证金：0自动；
z指数：5；
显示器：柔性盒；
弯曲方向：立柱；
证明内容：柔性端；
溢出y：自动；
背景色：青色；
.对话框{
宽度：90%；
背景：黑色；
边缘底部：20px；
边界半径：8px；
边框：5px纯红；
颜色：绿色；
文本对齐：居中；
左边距：5px；
填充物：5px；
显示：内联块；
p{}
}
}
您只需删除
调整内容：柔性端

两个箱子：（按预期从下到上装满容器）：
为此，请将以下代码添加到scss文件中：

display: flex;
flex-direction: column-reverse;
justify-content: flex-start;


.dialog容器{
边框：4px实心rgba（0,0,0,4）；
边界半径：5px；
宽度：300px；
高度：350px；
位置：相对位置；
保证金：0自动；
溢出y：滚动；
z指数：5；
显示器：flex；
弯曲方向：柱反向；
调整内容：灵活启动；
}
.对话框{
宽度：90%；
背景：白色；
边缘底部：20px；
边界半径：8px；
边框：5px纯绿色；
颜色：绿色；
文本对齐：居中；
左边距：5px；
填充：3倍；
显示：内联块；
}

方框1
方框2
方框3
方框4
方框5
方框6
方框7
您只需删除
调整内容：柔性端

两个箱子：（按预期从下到上装满容器）：
为此，请将以下代码添加到scss文件中：

display: flex;
flex-direction: column-reverse;
justify-content: flex-start;


.dialog容器{
边框：4px实心rgba（0,0,0,4）；
边界半径：5px；
宽度：300px；
高度：350px；
位置：相对位置；
保证金：0自动；
溢出y：滚动；
z指数：5；
显示器：flex；
弯曲方向：柱反向；
调整内容：灵活启动；
}
.对话框{
宽度：90%；
背景：白色；
边缘底部：20px；
边界半径：8px；
边框：5px纯绿色；
颜色：绿色；
文本对齐：居中；
左边距：5px；
填充：3倍；
显示：内联块；
}

方框1
方框2
方框3
方框4
方框5
方框6
方框7
display:flex-box
在几年前被重命名为
display:flex
。从
display:flex
切换到
display:flex-box
只能解决问题，因为
display:flex-box
是完全无效的代码，因此，容器返回到其默认设置：
display:block
。这里讨论了实际问题：
display:flex
仍然删除滚动条
display:flex-box
多年前被重命名为
display:flex
。从
display:flex
切换到
display:flex-box
解决了问题问题的唯一原因是
display:flex-box
是完全无效的代码，因此容器会返回其默认设置：
display:block
。实际问题在此处讨论：
display:flex
仍会删除滚动条
<div class="dialog-container">
   <div class="dialog-box">9</div>
   <div class="dialog-box">8</div>
   <div class="dialog-box">7</div>
   <div class="dialog-box">6</div>
   <div class="dialog-box">5</div>
   <div class="dialog-box">4</div>
   <div class="dialog-box">3</div>
   <div class="dialog-box">2</div>
   <div class="dialog-box">1</div>
</div>


.dialog-container {
    border: 4px solid rgba(255, 255, 255, .4);
    border-radius: 5px;
    width: 300px;
    height: 340px;
    position: relative;
    top: 50px;
    margin: 0 auto;
    z-index: 5;
    display: flex-box;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: auto;
    background-color: teal;


    .dialog-box {
        width: 90%;
        background: black;
        margin-bottom: 20px;
        border-radius: 8px;
        border: 5px solid red;
        color: green;
        text-align: center;
        margin-left: 5px;
        padding: 5px;
        display: inline-block;
        p {}
    }
}

display: flex;
flex-direction: column-reverse;
justify-content: flex-start;