CSS, JQuery - Flex-Elemente erscheinen nach der Anzeige nicht: keine;

Question

Sie können eine funktionierende Demo ansehen here

Ich habe folgendes Layout:

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

Wo das Styling ist wie folgt:

.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; 
} 

Das bedeutet:

• Wenn #container nicht sichtbar ist, sollten Sie t sehen er grünen Hintergrund der .holder
• Wenn entweder .left oder .right nicht richtig angezeigt werden, sollten Sie den blauen Hintergrund von #container

sehen, was Sie sollten sehen, auf Last, ist dies:

ABER! Als ich #container auf display: none; gesetzt

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

und dann den umzukehren

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

die Flex-Komponenten werden nicht richtig angezeigt, und Sie bekommen:

Was geschieht ? Warum wird es nicht richtig angezeigt?

Answer 1

benötigen Sie den Behälter wieder zu display: flex statt display: block

Answer 2

Ich habe es herausgefunden, nachdem ich es gepostet habe, aber ich lasse es für jeden, der dieses Problem in der Zukunft bekommt.

sollte stattdessen sein:

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

Genau so einfach. obwohl

Ansicht here