overflow: hidden on a floated div containing scaled image uses unscaled width for parent

RESOLVED DUPLICATE of bug 829958

Status

()

Core
Layout: Images
RESOLVED DUPLICATE of bug 829958
5 years ago
5 years ago

People

(Reporter: James, Unassigned)

Tracking

22 Branch
x86
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130618035212

Steps to reproduce:

http://jsfiddle.net/MXudn/8/

<div class="imageHolder">
    <img src='http://placehold.it/650x650' />
<div>


.imageHolder {
    height: 400px;
    background-color: green;
    float: left;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}



Actual results:

The image itself is 650x650.  The css sets its height to 400px which (correctly) rescales the image to 400x400.  The parent div is floated so it should resize to 400px wide as floats size to fit their contents.  Instead, the parent div is 650px wide, the width of the unscaled image.


Expected results:

The parent div should be 400x400 to fit the rescaled image instead of the unscaled image.
(Reporter)

Comment 1

5 years ago
One additional comment.  If the image's height is changed to a fixed pixel height or overflow: hidden is removed, it works as expected.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 829958
You need to log in before you can comment on or make changes to this bug.