Css overflow如何使用flex basis

Css overflow如何使用flex basis,css,flexbox,overflow,Css,Flexbox,Overflow,我想创建一个可滚动的flex项目。在包含overflow:auto的弹性项目中,当flex-basis:0时,它可以正常工作,但当我设置flex-basis:0%(默认设置)时,弹性项目溢出,但也可以滚动 在下面的代码片段中 flex basis中的百分比具体指的是什么 为什么溢出在.grand-child-1上的flex-basis:0可以正常工作,但在flex-basis:0% 为什么在上设置溢出:auto。child-2解决了这个问题 .main{ 背景颜色:浅灰色; 宽度:100v

我想创建一个可滚动的flex项目。在包含
overflow:auto
的弹性项目中,当
flex-basis:0
时,它可以正常工作,但当我设置
flex-basis:0%
(默认设置)时,弹性项目溢出,但也可以滚动

在下面的代码片段中

  • flex basis
    中的百分比具体指的是什么
  • 为什么溢出在
    .grand-child-1
    上的
    flex-basis:0
    可以正常工作,但在
    flex-basis:0%
  • 为什么在
    上设置
    溢出:auto
    。child-2
    解决了这个问题
.main{
背景颜色:浅灰色;
宽度:100vw;
高度:100vh;
显示器:flex;
弯曲方向:立柱;
证明内容:中心;
对齐项目:居中;
}
.家长{
宽度:80%;
身高:80%;
右边框:5px纯黑;
显示器:flex;
弯曲方向:立柱;
}
.child-1、.child-3{
弹性:1;
背景色:白色;
}
.child-2{
弹性:5;
背景颜色:粉红色;
右边框:5px实心橙色;
/*为什么这能解决问题*/
/*溢出:自动*/
显示器:flex;
弯曲方向:立柱;
}
.孙子-1{
柔性生长:1;
/*为什么将其从0%更改为0可以解决此问题*/
弹性基准:0%;
溢出:自动;
右边框:5px纯红;
背景颜色:灰色;
}
.孙子-2{
弹性:1;
背景色:天蓝色;
}
麦克斯分区{
高度:600px;
背景色:浅海绿色;
}


这可能是浏览器出现故障。您使用的是哪种浏览器?您是否在Chrome、Firefox、Edge和Safari中测试了您的代码?所有浏览器的行为都是一致的吗?请记住:还有这个:还有这个:(默认值不是你想象的0%)@Michael_B这似乎确实是一个浏览器故障。我在发布问题时只在chrome上测试了这个,但现在我在chrome、firefox和safari上测试了这个。在safari中,它可以正常工作,但在chrome和firefox中,问题就在这里