CSS，JQuery - 在display：none之后不显示Flex元素;

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
的蓝色背景

在加载时你应该看到的是：

BUT！当我将#container设置为display: none;

时

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

然后反转过程

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

Flex组件无法正常显示，您只能获得：

发生了什么事？为什么它没有正确显示？

Answer 1

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

Answer 2

在我发布之后就把它搞清楚了，但我会留给那些在将来遇到这个问题的人。

应改为：

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

就这么简单。

查看here