jquery - CSS、JQuery - Flex 元素在显示后不出现 : none;

Question

您可以查看工作演示 here

我有以下布局:

<div class="holder">
  <div id="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

样式如下:

.holder{
    height: 200px;
    background: #0F0;
}
#container {
  display: flex;
  flex-flow: row;
  height: 200px;
  background: #00F;
}
.left {
  background: tomato;
  width: 25%;
}
.right {
  flex: 1;
  background: gold;
}

这意味着:

• 如果#container不可见，您应该会看到.holder的绿色背景
• 如果 .left 或 .right 无法正常显示，您应该会看到 #container 的蓝色背景

加载时您应该看到的是:

但是!当我将 #container 设置为 display: none;

$('#container').css('display', 'none');

然后逆向执行该过程

$('#container').css('display', 'block');

flex 组件无法正常显示，你只能得到:

发生了什么事？为什么不能正常显示？

Answer 1

您需要将容器更改回 display: flex 而不是 display: block