What is the best way to make a display:flex container grow horizontally along with its wrapped items?

Question

What is the best way to make a display:flex container grow horizontally along with its wrapped items?

When working with css flexbox, the behavior of the main browsers can vary significantly in certain aspects.

For example, I am attempting to build a grid of images:

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

In this scenario, I require a container with multiple div elements that flow vertically and wrap when needed to create columns of photos.

The challenge is to ensure the container expands horizontally to fit the wrapped elements:

For a visual representation, check out this jsFiddle.

Here's how each browser behaves:

IE 11 - The container expands horizontally to wrap each column of elements effectively.
Firefox - The container only wraps the first column with the remaining overflowing out.
Chrome - The container always stretches to fill the width of its parent element.

In this case, I aim to achieve IE11's behavior in Firefox and Chrome. So, the question remains: How can I make a flexbox container expand horizontally to match its column wrap elements?

Appreciate your insights.

html css flexbox

Answer 1

Answer №1

It is interesting how many web browsers have not correctly implemented column flex containers, yet the support for writing modes is quite satisfactory.

As a solution, you can utilize a row flex container with a vertical writing mode. By doing so, the block direction will be swapped with the inline direction, causing the flex items to flow vertically. Afterwards, you simply need to restore the horizontal writing mode within the flex items.

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

Keep in mind that this method may encounter some bugs in specific scenarios, particularly when combining advanced layout techniques like floats and nested flexboxes. However, it generally performs well in common situations.

Answer 2

It is interesting how many web browsers have not correctly implemented column flex containers, yet the support for writing modes is quite satisfactory.

As a solution, you can utilize a row flex container with a vertical writing mode. By doing so, the block direction will be swapped with the inline direction, causing the flex items to flow vertically. Afterwards, you simply need to restore the horizontal writing mode within the flex items.

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

Keep in mind that this method may encounter some bugs in specific scenarios, particularly when combining advanced layout techniques like floats and nested flexboxes. However, it generally performs well in common situations.

Answer 3

Answer №2

According to the specifications, the code you're using should function properly, but unfortunately, it is not implemented correctly in most major browsers besides Internet Explorer and Edge. This issue renders multi-line layouts using inline-flex and column useless for the majority of developers at this time. A bug report on Chromium showcases a similar example to yours, demonstrating the incorrect rendering in Chrome, Safari, and Firefox.

The technical aspects of the specification may be complex to grasp, but the crucial point is that the Flexible Box Layout Module Level 1 defines the intrinsic cross-size of a flex container, specifically for flex-direction: row and flex-direction: column in the Flex Container Intrinsic Cross Size section. The specification states:

For a multi-line flex container, the min-content/max-content cross size is the sum of the flex line cross sizes

Essentially, the width of a flex-direction: column flex container should be the total width of its columns. However, Chrome, Firefox, and Safari inaccurately calculate this width, resulting in it being set to the width of the widest single element when using width: min-content or width: max-content on a wrapped column flex box in Chrome.

While there is a Chrome-specific workaround available, it is advisable to avoid it. Until this bug is resolved, this particular aspect of the Flexbox model does not function as intended, leaving developers without a clear solution.

Answer 4

According to the specifications, the code you're using should function properly, but unfortunately, it is not implemented correctly in most major browsers besides Internet Explorer and Edge. This issue renders multi-line layouts using inline-flex and column useless for the majority of developers at this time. A bug report on Chromium showcases a similar example to yours, demonstrating the incorrect rendering in Chrome, Safari, and Firefox.

The technical aspects of the specification may be complex to grasp, but the crucial point is that the Flexible Box Layout Module Level 1 defines the intrinsic cross-size of a flex container, specifically for flex-direction: row and flex-direction: column in the Flex Container Intrinsic Cross Size section. The specification states:

For a multi-line flex container, the min-content/max-content cross size is the sum of the flex line cross sizes

Essentially, the width of a flex-direction: column flex container should be the total width of its columns. However, Chrome, Firefox, and Safari inaccurately calculate this width, resulting in it being set to the width of the widest single element when using width: min-content or width: max-content on a wrapped column flex box in Chrome.

While there is a Chrome-specific workaround available, it is advisable to avoid it. Until this bug is resolved, this particular aspect of the Flexbox model does not function as intended, leaving developers without a clear solution.

Answer 5

Answer №3

It appears that this issue may require a JQuery solution rather than just CSS.

Calculate the container width by subtracting the position of the last child from the position of the container and adding the width of the last child (including margin).

Sample Code :

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

See Demo :

http://jsfiddle.net/qzea320L/

Answer 6

It appears that this issue may require a JQuery solution rather than just CSS.

Calculate the container width by subtracting the position of the last child from the position of the container and adding the width of the last child (including margin).

Sample Code :

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

See Demo :

http://jsfiddle.net/qzea320L/

Answer 7

Answer №4

Your design features a column layout distribution within a fixed height container.

By setting the flex-direction to column, you establish the Vertical axis as the primary axis.

This means, in flexbox, it will first fill up the available height before creating a new column.

Check out this example where javascript is used to adjust the container's height, causing the child items to move accordingly.

Note: It's advisable not to depend on IE for flex support as their implementation is relatively new.

Answer 8

Your design features a column layout distribution within a fixed height container.

By setting the flex-direction to column, you establish the Vertical axis as the primary axis.

This means, in flexbox, it will first fill up the available height before creating a new column.

Check out this example where javascript is used to adjust the container's height, causing the child items to move accordingly.

Note: It's advisable not to depend on IE for flex support as their implementation is relatively new.

Answer 9

Answer №5

Here is an alternative solution to consider:

.container {
  column-count: 2; /*or any desired number */
}
.container > div {
  display: inline-block;
}

Learn more about CSS column-count

If the elements do not align properly at the top, you may need to adjust the margin-top of .container > div:first-child.

Answer 10

Here is an alternative solution to consider:

.container {
  column-count: 2; /*or any desired number */
}
.container > div {
  display: inline-block;
}

Learn more about CSS column-count

If the elements do not align properly at the top, you may need to adjust the margin-top of .container > div:first-child.

What is the best way to make a display:flex container grow horizontally along with its wrapped items?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Label text will not be wrapped in front of the label (bootstrap)

Displaying the information from a nested array of objects in an HTML table through iteration

What could be the reason for an element with a width of 100% not recognizing the width of its parent?

Troubleshooting issues with Bootstrap Accordion functionality within a React environment

Pan motion gesture above HTML components

Choosing colors for Font Awesome icons

Exploring the world of CSS: accessing style attributes using JavaScript

Transferring the values of JavaScript objects to HTML as strings

Maintaining image ratio on the entire screen

Creating a scroll bar that overlaps a chart within a div

Looking to create a custom loader that adapts to different screen sizes

Eliminate gaps between lines in a wrapped Flexbox layout

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"

Elevate Your Design with Bootstrap 4 - Rearrange Rows with Ease

Disabling the scrollbar in Selenium screenshots

What steps are needed to create a hover box that appears on the right side of my div?

Text input field with uneditable text displayed at the end

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

Get a calendar that displays only the month and year

What is the best way to determine the variable height of a div in Angular 7?