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