CSS，不同勢擴大在Firefox和IE

Question

倒塌行爲我有一個具有擴展菜單和其他類似的面板：

當我在IE 10和Firefox 55.0.3展開面板，似乎像這樣：

但在鉻，它工作得很好

在.tbl-main.Expandable搜索面板和結果面板（tbl-container）上有兩個部分。我使用flex佈局來覆蓋parent.Search面板在這裏只有15px.tbl-main的重放必須是.tbl-container.It在這裏是okey。但瀏覽器的行爲很奇怪。在這裏我的HTML和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

從.tbl-searchpanel label規則刪除min-height: 100%;

棧片斷

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>