- html/
- Html CSS3 FLEXBOX工作状态不正确（FF-正常）
Html CSS3 FLEXBOX工作状态不正确（FF-正常）
Html CSS3 FLEXBOX工作状态不正确（FF-正常）,html,css,flexbox,Html,Css,Flexbox,某些结构在FF中工作良好，但铬则不然
堆栈片段
html，正文{
高度：100%！重要；宽度：100%！重要；
边距：0！重要；填充：0！重要；
}
.x{显示：柔性；柔性方向：列；高度：100%；宽度：100%；}
.x头{背景颜色：银色；}
.x-body{flex:11自动；overflow-y:auto；}
/*内容有两栏*/
.x-structure-2列{显示：柔性；柔性方向：行；高度：100%；宽度：100%；}
.x-structure-2-columns-left{背景色：浅
某些结构在FF中工作良好，但铬则不然
堆栈片段
html，正文{
高度：100%！重要；宽度：100%！重要；
边距：0！重要；填充：0！重要；
}
.x{显示：柔性；柔性方向：列；高度：100%；宽度：100%；}
.x头{背景颜色：银色；}
.x-body{flex:11自动；overflow-y:auto；}
/*内容有两栏*/
.x-structure-2列{显示：柔性；柔性方向：行；高度：100%；宽度：100%；}
.x-structure-2-columns-left{背景色：浅绿色；宽度：100px；}
.x-structure-2-columns-right{display:flex；flex:11 auto；overflow-y:auto；flex-direction:column；}
.x-structure-2-columns-right-header{背景：黄色；}
.x-structure-2-columns-right-body{flex:11自动；overflow-y:auto；最小高度：0px；背景：粉色；}
这是一个标题
左边
副导航
12334545678123345678123345678123345678123345678 123345678123345678123345678123345678123345678123345678123345678
这里您使用了高度：100%，结合部分嵌套Flexbox
不建议这样做，因为例如，flex项通常使用flex增长或对齐项来填充其父项的给定高度/宽度，并且没有设置高度。因此，当flex项的子项获得一个百分比时，在大多数情况下，它将解析为自动，并导致所有项都无法正常工作
而是一直使用Flexbox
这里的主要修复方法是在x上将minheight的默认auto重置为0，允许其小于其内容，并添加display:flex，使其成为flex容器
有了这个，我们可以去掉高度：100%在.x-structure-2柱上，让Flexbox负责空间分布
注意，与最小高度：0不同的是，可以将溢出值与visible以外的值一起使用，就像您在某些地方使用overflow-y:auto；，尽管最小高度在可读性方面更合适，除非需要滚动条，如x-structure-2-columns-right-body上的滚动条
我还清理了一些属性，这些属性不是不需要就是有默认值
下面的示例在最新版本的Chrome、Firefox、Edge和IE11上测试成功
堆栈片段
html，正文{
身高：100%；
保证金：0；
}
.x{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.x头{
背景颜色：银色；
}
.x-body{
弹性：1；
最小高度：0；/*已添加*/
显示：flex；/*已添加*/
}
/*内容有两栏*/
.x-结构-2-柱{
柔性：1；/*填充宽度*/
显示器：flex；
}
.x-structure-2-columns-left{
背景颜色：浅绿色；
宽度：100px；
}
.x-结构-2-立柱-右侧{
flex:1自动；
显示器：flex；
弯曲方向：立柱；
}
.x-structure-2-columns-right-header{
背景：黄色；
}
.x-结构-2-柱-右-主体{
flex:1自动；
溢出y：自动；
背景：粉红色；
}
这是一个标题
左边
副导航
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
123
345
678
太多了！工作完美！