CSS，JQuery - 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不可见，则应该看到t他绿色的.holder
• 背景如果任.left或.right显示不正确，你应该看到的#container

蓝色的背景，你会看到什么，上载，是这样的：

但是！当我设置#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