I have the following HTML and CSS that behaves totally different in Firefox and Chrome.
JSFiddle .
.container { width: 200px; height: 50px; border: 1px solid black; display: inline-table; } .content { background-color: red; width: 30%; height: 100%; }
<div class="container"> <div class="content"></div> </div> <div class="container"> <div class="content"></div> </div>
In Chrome it displays correctly but not in Firefox.
Chrome:
Firefox:
By inspecting the content div in Firefox, the height is 0.
Why does it work in Chrome and Safari, but not in Firefox? I notice that removing the display: inline-table
will work but the container div will be stacked instead of inline.
Try changing display: inline-table;
to display: inline-block;
.
I could only get it to work when I used
.content {
display: inline-table;
}
The element does not display properly because FireFox is locking it to the size of the inner content, but I'm sure you already gathered that.
I noticed that the container height that holds the inner is fixed to 50. If you have a fixed height for the outer container, you could match the height for the inner element.
I know this isn't the dynamic solution based on percent, but it's a work around.
try this its working
position: absolute;
top: 0px;
bottom: 0px;
width: 50px;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.