Css 屏幕滚动时的柔性剪切边界

嗨，我有以下HTML代码（这里是“工作”）

项目
项目
项目
项目
一些内容

风格：

.layout{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
梅因先生{
显示器：flex；
}
.菜单{
显示器：flex；
右边框：实心3px红色；
宽度：258px；
弯曲方向：立柱；
}
.菜单项{
高度：340px；
宽度：240px；
利润率：10px；
背景：AAAAA；
}

问题是，在Chrome上，当屏幕高度小于左菜单并出现滚动条时，当滚动条向下移动时，菜单右边框（红色）将不会呈现。所需的行为是在垂直菜单的末尾绘制红色边框（因此，如果我们移动滚动条，我们应该始终看到红色边框）。怎么做

---

我不知道为什么chrome会这样，但我们至少可以找到两种解决方案：

更改<代码>高度：100vh在

布局中

类到

最小高度：100vh

添加

flex:10自动到
.main
类

也许有人能解释为什么chrome会这样，为什么上面的解决方案会起作用

我也想知道为什么我会改变

项目

---

到

项目

所有项目都将压缩到屏幕大小？（在这种情况下，滚动条（和问题）将消失，但不会以可接受的方式消失）

我不知道为什么chrome会以这种方式运行，但我们至少可以找到两种解决方案：

更改<代码>高度：100vh在

布局中

类到

最小高度：100vh

添加

flex:10自动到
.main
类

也许有人能解释为什么chrome会这样，为什么上面的解决方案会起作用

我也想知道为什么我会改变

项目

---

到

项目

所有项目都将压缩到屏幕大小？（在这种情况下，滚动条（和问题）将消失，但不会以可接受的方式消失）

这是块元素的默认行为。它们变得和它们的父元素一样高或一样宽，而内联元素则随着内容而增长

有几种解决方案可以使红色边框的大小与内容一致，下面是3种解决方案，其中我使用了您在自己的回答中提到的2种，来解释它们的工作原理：

将其移动到

主

子项。这是因为flex项的行为类似于内联块，并且随着内容的增长而增长

改为使用

min height

，使最外层具有非固定高度，在本例中为

布局

。这项工作作为flex容器现在允许高于完整视口

由于弹性项的默认值为

flex:0 1 auto

，因此将

main

设置为

flex:1 0 auto

时，这些术语将被替换

堆栈代码段1

.layout{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
梅因先生{
显示器：flex；
}
.菜单{
显示器：flex；
宽度：258px；
弯曲方向：立柱；
}
.菜单>分区{
右边框：实心3px红色；
}
.菜单项{
高度：340px；
宽度：240px；
利润率：10px；
背景：AAAAA；
}

项目
项目
项目
项目
一些内容

这是块元素的默认行为。它们变得和它们的父元素一样高或一样宽，而内联元素则随着内容而增长

有几种解决方案可以使红色边框的大小与内容一致，下面是3种解决方案，其中我使用了您在自己的回答中提到的2种，来解释它们的工作原理：

将其移动到

主

子项。这是因为flex项的行为类似于内联块，并且随着内容的增长而增长

改为使用

min height

，使最外层具有非固定高度，在本例中为

布局

。这项工作作为flex容器现在允许高于完整视口

由于弹性项的默认值为

flex:0 1 auto

，因此将

main

设置为

flex:1 0 auto

时，这些术语将被替换

堆栈代码段1

.layout{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
梅因先生{
显示器：flex；
}
.菜单{
显示器：flex；
宽度：258px；
弯曲方向：立柱；
}
.菜单>分区{
右边框：实心3px红色；
}
.菜单项{
高度：340px；
宽度：240px；
利润率：10px；
背景：AAAAA；
}

项目
项目
项目
项目
一些内容