18

I have a container and several inner divs. 

.container {
 display: inline-flex;
 flex-flow: column wrap;
 max-height: 500px;
}
.element {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
}

Now I have 3 flex columns.

What I expected: Container's width becomes equal to the sum of columns' width (660px).

What I got: Container's width becomes equal to the first column's width.

The pen: http://codepen.io/korsun/pen/zGpQrZ

Why? When I change flex-direction to row and max-height to max-width everything goes just as expected. Is there a way to make my container's width equal to content width?

korsun
  • 618
  • 2
  • 6
  • 12
  • The problem is in how the browser handle the laying out of the element. Maybe you can submit bug to browser developer. – Barun Sep 22 '15 at 10:34

1 Answers1

2

  1. Your ".wrap" container is set to "inline-block". You will want the container of ".container" to be set to "block" and then a defined with to contain the blocks overall.

  2. Your ".container" is set to "inline-flex" which is then doing the same thing as ".wrap" when you add the inline element into the picture. Setting this back to "flex" should fix your problem.

  3. Your elements inside the container should typically set to "flex: [number]" and a containing width. The current with of "200" is constraining and unfortunately unresponsive. Setting a max-width of 200 will both give it the width desired plus the responsive aspect which you can control with media queries.

http://codepen.io/mmcshinsky/pen/bd927e31d2df2f9180a5b7fcf1df2740/

.wrap {
  display: block;
  max-width: 660px;
}
.container {
  display: flex;
  flex-flow: column wrap;
  max-height: 500px;
}

.element {
  max-width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
  flex: 1;
}
michael.mcshinsky
  • 37
  • 3