How can I make a display:flex container expand horizontally with its wrapped contents?

flexbox height fit content
flex-grow
css flex property
flex space-between
inline-flex
flex order
flex-direction
flex min-height

When using css flexbox the three main browsers appear to behave entirely differently in certain areas.

In this case I am trying to create 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 example I need a container, itself containing several div elements set up to flow from top to bottom and wrapping when they reach the bottom. Ultimately providing me with columns of photos.

However I need the container to expand horizontally to accommodate the wrapped elements:

Here is a quick jsFiddle to demonstrate.

The behaviour is as follows:

  • IE 11 - Correct, the container stretches horizontally to wrap each column of wrapped elements
  • Firefox - The container only wraps the first column of elements, with the rest overflow out.
  • Chrome - The container always stretches to fill the width of its parent, whatever that may be.

In this instance I would like to achieve the behaviour of IE11 in the other two browsers. Therefore my question is, how can I make a flexbox container expand horizontally to match its column wrap contents.

Thanks in advance.


It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution

container width = position of the last child - position of the container + width of the last child (including margin)

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

Demo :

http://jsfiddle.net/qzea320L/

Mastering Wrapping of Flex Items, In this case I am trying to create a grid of images: <div class="container"> <div a flexbox container expand horizontally to match its column wrap contents. The main idea is to explain how we can achieve this layout. Adding all the items into 1 container div that uses flex to wrap the items The first item of each "inner container" (I'll call it a section) will have a class, which helps us to do some manipulations that create the separation and styling of each section.


It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good.

Therefore, you can use a row flex container with a vertical writing mode. This will swap the block direction with the inline direction, and thus the flex items will flow vertically. Then you only need to restore the horizontal writing mode inside 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>

A Complete Guide to Flexbox, The initial value of the flex-wrap property is nowrap . to grow, it will fill the axis just as if you had a single item flex container. The following live sample uses CSS Grid Layout to create a layout This behaviour is useful if you want to target flex items using JavaScript to show and hide content for example. When you set the li element as display: flex; flex-direction: column, then the items multiple span and text span are force-wrapped into two lines, even if there is enough space, instead of remaining in the same line.


The spec says that what you're doing should work, but it's implemented incorrectly in every major browser besides Internet Explorer / Edge, making multi-line inline-flex column layouts useless at present for most developers. Here's a Chromium bug report providing an example that is effectively identical to yours, and noting that it renders incorrectly in Chrome, Safari, and Firefox.

The argument from spec is more complicated than I'm able to understand, but the key point is that Flexible Box Layout Module Level 1 spec defines the intrinsic cross-size of a flex container (that is, the intrinsic height of a flex-direction: row flex container or the intrinsic width of a flex-direction: column flex container) in the section Flex Container Intrinsic Cross Size. There, it is stated:

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

That is, the intrinsic width of a flex-direction: column flex container should be the sum of the widths of its columns, as you'd expect. (There is more complexity than this, and I don't understand it all, but I believe the above to be broadly true.) However, Chrome, Firefox, and Safari all calculate this width incorrectly; setting width: min-content or width: max-content on a column wrap flex box in Chrome, you can clearly see that the width is set to the width of the widest single element.

A silly Chrome-specific workaround exists, but is probably best avoided. Until the bug is fixed, this part of the Flexbox model simply doesn't work as designed and there's no clean solution available.

`flex-grow` is weird. Or is it?, display. This defines a flex container; inline or block depending on the given value. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical and harder to know what its brethren max-content , min-content , and fit​-content do. This looks like a fundamental deficiency in the flexbox layout. A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.) This question has been asked many times (see list below), with no clean flex or general CSS answers.


You have a column layout distribution with a fixed height container.

When you set the flex-direction to column you define the Vertical axis as the main axis.

In flexbox that means it will fill up the available height and then create a new column.

In this JSBIN I use javascript to change the container's height and, because of that, you will see the child items move.

PS: you shouldn't rely on IE behavior since their flex support is recent.

What Happens When You Create A Flexbox Flex Container , When I found out about flex-grow , I made a simple demo to find out what it did and As it turns out, the problem wasn't the CSS, but the content (or lack of content). anything else, the child elements will be stacked horizontally, no matter what. A flex container distributes free space to its items (proportionally to their flex  When flexbox items wrap in column mode, container does not grow its width How can I make a display:flex container expand horizontally with its wrapped contents? 👍 3


Another possible approach:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

You may also need to adjust margin-top of .container > div:first-child if they don't align to the top.

Flexbox Cheatsheet, The outer display type of our flex container is block ; it acts like a This means that when you ask Flexbox to give you a row, you get a horizontal display of your flex items. The initial value of justify-content is set to flex-start . If flex-grow were set to a positive value, this would cause the items to grow and  A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row .) This question has been asked many times (see list below), with no clean answers in CSS.


Flexbox, A flex container establishes a new flex formatting context for its contents. This is and the flex container's margins do not collapse with the margins of its contents. .parent { display: flex; align-items: flex-start; flex-wrap: nowrap; height: 100%; } .​child flex-basis is resolved the same way as width in horizontal writing modes  Expand container div with content width. What I'm trying to do is to have the container div expand horizontally when needed, given the total width of the child


A visual guide to CSS Flexbox, Flexbox makes it simple to align items vertically and horizontally using rows and columns. CSS flexbox is great to use for the general layout of your website or app. flex-flow: <'flex-direction'> || <'flex-wrap'> justify-content: flex-start | flex-​end CSS that can be applied to items/elements in the container. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below). main-start | main-end - The flex items are placed within the container starting from main-start and going to main-end. main size - A flex item's width or height, whichever is in the main dimension, is the item's main size.


CSS flex-wrap property, In the flex layout model, the children of a flex container can be laid out in align-​content); Flex Item properties (order, flex, flex-grow, flex-shrink, Just one line of CSS has changed the layout from a vertical direction to a horizontal one. 3. wrap-reverse on the other hand will wrap the next row of flex items  Flex container's margins do not collapse with there margins of its contents.<br> Order of elements can easily be changed without editing the source HTML.<br> Flex properties