How to Achieve Consistent Horizontal Expansion for Wrapped Flex Items Across Browsers?

Horizontally Expanding Flex Container for Wrapped Contents

When utilizing CSS Flexbox, browsers may exhibit varying behaviors for certain properties. In particular, creating a grid of images arranged in columns and allowing them to wrap can present challenges in achieving consistent behavior across browsers.

Consider the following HTML code:

<div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
</div>

And the accompanying CSS:

.container {
    display: inline-flex;
    flex-flow: column wrap;
    align-content: flex-start;
    height: 100%;
}

The goal is for the container to expand horizontally to accommodate the wrapped elements, providing a grid-like layout with columns of images. However, as you might experience in a provided jsFiddle, browser behaviors differ:

• IE 11: The container expands horizontally, wrapping each column of elements.
• Firefox: Only the first column of elements is wrapped, with the rest overflowing.
• Chrome: The container always stretches to fill the width of its parent.

To address this inconsistency and achieve the behavior observed in IE 11, implement the following solution:

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

This approach utilizes a row flex container with a vertical writing mode. By swapping the block and inline directions, the flex items are forced to flow vertically. The writing modes within the individual flex items are then reset to horizontal. As a result, the container will expand horizontally to match the wrapped content, mimicking the behavior observed in IE 11.

The above is the detailed content of How to Achieve Consistent Horizontal Expansion for Wrapped Flex Items Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!