34

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.

9
  • jsfiddle.net/f7Ku8/4 as i understood you.
    – pic0
    May 1, 2014 at 13:48
  • you have a row layout distribution with a fixed height container ... that does not make sense; test different layouts here May 1, 2014 at 13:50
  • @rafaelcastrocouto why does that not make sense? I want the container to be a fixed height but expand horizontally as more columns are added. It is a column layout distribution not a row one.
    – gordyr
    May 1, 2014 at 13:59
  • @pic0 Thanks but that isn't what i'm after. Your solution removes flex-box entirely which does indeed make the container expand correctly. However I need the items to flow from the top to bottom in columns, hence the display:inline-flex or display:flex requirement.
    – gordyr
    May 1, 2014 at 14:01
  • Do you want it to overflow? It's not clear what's your intention. Do you have an example? May 1, 2014 at 14:04

5 Answers 5

59

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>

This approach may have its own bugs in edge cases, especially if you mix advanced layout techniques like floats and nested flexboxs. But for most cases it seems to work properly.

6
  • 3
    That's a ridiculous hack. Thanks!
    – Edward
    Nov 10, 2017 at 14:55
  • 1
    This does not seem to work in Firefox. Especially when in nested flexboxes. I believe this is the "Chrome-specific workaround" that @Mark Amery mentions in his answer.
    – Ben.12
    Feb 22, 2018 at 21:20
  • 3
    thanks works in Chrome, FF, Edge... (not IE obviously) Feb 26, 2019 at 13:11
  • 2
    incredible that this bug is still out here late 2019.. Anyway, this work-around works great!
    – svenema
    Sep 15, 2019 at 10:42
  • 1
    Brilliant, and still relevant in 2022! I did unspeakable things looking for a solution... had I only known of this earlier... Apr 24, 2022 at 21:19
10

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.

6

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/

2
  • 1
    -1. This might work in simple cases, but if there's any potential for the width to change (e.g. due to adding or removing flex items, or changing the height of the flex container) then this is going to break, and if there's no potential for it to change, then why not simply hard-code it in your CSS? Also, this is likely to fail if the flex items have different sizes - you're relying upon the last child being the one whose box extends farthest to the right, but that needn't be true.
    – Mark Amery
    Dec 18, 2016 at 14:20
  • 3
    Writing JS instead of CSS doesn't scale. It works only in simplest cases. -1 for jQuery in 2014. May 22, 2017 at 21:35
-1

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.

1
  • 3
    I understand all of this but it doesn't really answer my question I am afraid. I am simply looking for a way to make the flex-box container element automatically expand horizontally to match its contents. If this is not possible then so be it. But it is disappointing since all three browsers behave completely differently in this regard. PS I am not relying on IE's behaviour, that is why I am asking this question. Regardless, thank you for taking the time to answer.
    – gordyr
    May 1, 2014 at 15:28
-1

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.

3
  • Don't copy/paste the same answer all over, post at one place and then vote to close on the other ... Is it ok to copy/paste myself?
    – Asons
    Oct 1, 2018 at 18:10
  • Furthermore, this answer doesn't provide a solution to the asked question, since it will create a different flow than what is asked for.
    – Asons
    Oct 1, 2018 at 18:11
  • I'll try to take your rebukes and downvotes to heart. In my defense, I had just spent too much time looking at SO pages about flex, when what I needed was column-count, and I was trying to help others to have a better experience.
    – Marcus
    Oct 2, 2018 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.