Css bootstrap4&；全高页面上的灵活和可折叠内容

我正在尝试使用flex和bootstrap 4（与bootstrap 3相同的问题）在全高页面上创建一个可折叠的

div

（固定高度）

当前代码片段在Firefox上运行良好，但在基于Chrome的浏览器上不起作用：

collapsable

的初始大小是正确的（

100px

），但一旦折叠它，它就无法正确调整大小（

0px

，如果subresizeable的高度是

100%

，或者与可用空间成比例）

html，正文{
身高：100%；
宽度：100%；
}
身体{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
柔性流动：柱；
}
#可折叠{
高度：100px；
背景颜色：绿色；
}
#可缩小{
身高：100%；
宽度：100%；
背景颜色：粉红色；
}
#可调整大小{
-webkit-box-flex:1；
-moz-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
背景色：红色；
}

崩溃

对于bootstrap3，我认为您只需要确保

#resizeable

是

display:flex

#resizable {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: red;
  display: flex;
}


在bootstrap4中，您可以只使用
d-flex
util类


相关问题：
对于bootstrap3，我认为您只需要确保
#resizeable
是
display:flex

#resizable {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: red;
  display: flex;
}


在bootstrap4中，您可以只使用
d-flex
util类


相关问题：