In Firefox, I am encountering a peculiar problem.
The issue arises when I have a div with a height defined in a fixed px value, and an img element nested within it. While this configuration works fine in Chrome, in Firefox, the parent div's width ends up being larger than the img inside it.
Here is the HTML structure:
<div class="wrapper">
<div class="imageHolder">
<img src='dasource'>
</div>
</div>
And here is the corresponding CSS:
.wrapper {
width: 900px;
}
.imageHolder {
height: 400px;
width: auto;
background-color: green;
float: left;
max-width: 50%;
overflow: hidden;
}
.imageHolder img {
height: 100%;
}
The provided fiddle demonstrates that in Firefox, the parent div ends up wider than the image it contains.
Do you have any insights into why this might be happening?