How to Achieve Consistent Horizontally Expanding Flexbox Container Behavior Across Browsers?

Horizontally Expanding Flexbox Container

Issue

In flexbox, the behavior of a container with wrapped contents varies across browsers. IE 11 exhibits desired behavior by stretching the container horizontally to wrap elements, while Firefox and Chrome show inconsistencies.

Solution

Although browsers lack full implementation of column flex containers, they support writing modes well. By utilizing a row flex container with a vertical writing mode, the container's inline direction is swapped with the block direction. Flex items will flow vertically, and horizontal writing mode can be restored within the flex items.

Example Code

.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;
}

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

This approach mimics IE 11's behavior by ensuring the container horizontally stretches to accommodate the wrapped contents in Firefox and Chrome.

The above is the detailed content of How to Achieve Consistent Horizontally Expanding Flexbox Container Behavior Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!