How to Make a Flexbox Container Expand Horizontally with Wrapped Content Across Browsers?

Expanding Flexbox Containers Horizontally with Wrapped Content

Flexbox offers a powerful solution for creating flexible layouts. However, discrepancies in browser behaviors can arise, leading to unexpected results. One such issue emerges when attempting to make a flexbox container expand horizontally with its wrapped content.

Consider the following HTML and CSS 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>

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

This code aims to create a grid of images that flow from top to bottom, wrapping when they reach the bottom. However, browser behaviors vary:

• IE 11: Container expands to accommodate wrapped elements successfully.
• Firefox: Only wraps the first column of elements, with others overflowing.
• Chrome: Container always fills the width of its parent.

To achieve the desired behavior in other browsers, consider utilizing a row flex container with vertical writing mode.

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

<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>

By swapping the block direction with the inline direction, the flex items flow vertically. Restoring the horizontal writing mode inside the flex items completes the solution. This technique allows for the creation of flexbox containers that expand horizontally to match their column wrap contents in a consistent manner across browsers.

The above is the detailed content of How to Make a Flexbox Container Expand Horizontally with Wrapped Content Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!