CSS, Diffrent développer et effondra comportement dans Firefox et iE

Question

J'ai un panneau qui a expand menu et d'autres comme:

Quand je panneau déplié dans 10 iE et Firefox 55.0.3, il semble comme ceci:

Mais en chrome, il fonctionne bien

Il y a deux parties sur le panneau de recherche .tbl-main.Expandable et le panneau de résultats (tbl-container). J'utilise flex layout pour couvrir parent.Search panel est seulement 15px ici.Reste de .tbl-main doit être .tbl-container.Il est OK ici. Mais les navigateurs se comportent étrangement. Voici mes codes html et css

.tbl-main { 
 
    height: 100%; 
 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 
 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ 
 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; /* NEW - Chrome */ 
 
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    -webkit-box-direction: normal; 
 
    -moz-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 

 
.tbl-searchpanel { 
 
    min-height: 15px; 
 
    background: yellow; 
 
} 
 

 
.tbl-container { 
 
    min-height: 50px; 
 
    background-color: blue; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
} 
 

 
.tbl-searchpanel input { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 

 
.tbl-searchpanel label { 
 
    display: block; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
    border-bottom: 1px solid #CCC; 
 
    color: #666; 
 
    background-color: lightcoral; 
 
    min-height: 100%; 
 
} 
 

 
.tbl-searchpanel label:hover { 
 
    color: #000; 
 
} 
 

 
.tbl-searchpanel label::before { 
 
    font-family: Consolas, monaco, monospace; 
 
    font-weight: bold; 
 
    font-size: 15px; 
 
    content: "+"; 
 
    vertical-align: central; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 3px; 
 
    background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); 
 
} 
 

 
#expand { 
 
    width: 100%; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
    /*background: url(http://placekitten.com/g/600/300);*/ 
 
    /*color: #FFF;*/ 
 
    background-color: red; 
 
    display: none; 
 
} 
 

 
#toggle:checked~#expand { 
 
    display: block; 
 
} 
 

 
#toggle:checked~label::before { 
 
    content: "-"; 
 
}

<div class="tbl-main"> 
 

 
    <div class="tbl-searchpanel"> 
 
    <input id="toggle" type="checkbox" /> 
 
    <label for="toggle"></label> 
 
    <div id="expand"></div> 
 
    </div> 
 

 
    <div class="tbl-container"> 
 
    </div> 
 

 
</div>

Answer 1

Retirez le min-height: 100%; de la .tbl-searchpanel label règle

Stack snippet

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.tbl-main { 
 
    height: 100%; 
 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 
 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ 
 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; /* NEW - Chrome */ 
 
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    -webkit-box-direction: normal; 
 
    -moz-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 

 
.tbl-searchpanel { 
 
    min-height: 15px; 
 
    background: yellow; 
 
} 
 

 
.tbl-container { 
 
    min-height: 50px; 
 
    background-color: blue; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
} 
 

 
.tbl-searchpanel input { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 

 
.tbl-searchpanel label { 
 
    display: block; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
    border-bottom: 1px solid #CCC; 
 
    color: #666; 
 
    background-color: lightcoral; 
 
    /* min-height: 100%;      removed */ 
 
} 
 

 
.tbl-searchpanel label:hover { 
 
    color: #000; 
 
} 
 

 
.tbl-searchpanel label::before { 
 
    font-family: Consolas, monaco, monospace; 
 
    font-weight: bold; 
 
    font-size: 15px; 
 
    content: "+"; 
 
    vertical-align: central; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 3px; 
 
    background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); 
 
} 
 

 
#expand { 
 
    width: 100%; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
    /*background: url(http://placekitten.com/g/600/300);*/ 
 
    /*color: #FFF;*/ 
 
    background-color: red; 
 
    display: none; 
 
} 
 

 
#toggle:checked~#expand { 
 
    display: block; 
 
} 
 

 
#toggle:checked~label::before { 
 
    content: "-"; 
 
}

<div class="tbl-main"> 
 

 
    <div class="tbl-searchpanel"> 
 
    <input id="toggle" type="checkbox" /> 
 
    <label for="toggle"></label> 
 
    <div id="expand"></div> 
 
    </div> 
 

 
    <div class="tbl-container"> 
 
    </div> 
 

 
</div>