Items do not vertically shrink when child images vertically shrink

Fixed, not yet flighted Issue #301239

Details

Created
Jun 9, 2014
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

See this jsfiddle for a good example. Works in Chrome, Firefox, but not IE11: http://jsfiddle.net/2RBuf/1/

I have a container (tag ‘div’) that is set thusly:

display: flex;
flex-direction: column;
flex-wrap: wrap;

And within that container, I have items (tag ‘article’) set thusly:

width: 300px;

And within each item, I have an image set thusly:

width: 100%;

Given a large image (say, 1200 x 800), it will shrink down to size appropriately while the article element is left with a large, empty, vertical space equal in height to the remainder of the original height of the image. The image would be shrunk to 200px in height with a 600px empty space under it.

Expected Results:

The flex items should vertically shrink with the image and not leave blank gaps.

Actual Results:

 

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Assigned To from “Christian F.” to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Greg W.”

      Changed Status to “Confirmed”

      Changed Title from “Flexbox items do not vertically shrink when child images vertically shrink” to “Items do not vertically shrink when child images vertically shrink”

      Changed Assigned To from “Greg W.” to “Jianyong M.”

      Changed Status from “Confirmed”

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

      Changed Status from “Confirmed” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “In progress”

      Changed Assigned To from “Jianyong M.” to “IE F.”

      Changed Status from “In progress” to “Fixed”

      Changed Status from “Fixed” to “Fixed, not yet flighted”

      Changed Steps to Reproduce

    You need to sign in to your Microsoft account to add a comment.

    Sign in