CSS，Firefox和IE中不同的展开和折叠行为

Question

I have an panel which has expand menu and other like:

When I expand panel in IE 10 and Firefox 55.0.3, it seems like this:

But in chrome, it works well

There is two part on .tbl-main.Expandable search panel and result panel(tbl-container). I use flex layout to cover parent.Search panel is only 15px here.Rest of .tbl-main must be .tbl-container.It is okey here. But Browsers behave strange. Here my html and css codes

 .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

Remove the min-height: 100%; from the .tbl-searchpanel label rule

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>