Multi-line flexbox, container width is only one column

Question

I'm using multiple line flexbox with flex-direction: column;. And flex container is removed from normal flow (for example with position: absolute;)

.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 110px;
  background: yellow;
  border: solid 1px black; 
}

.item{
  height: 50px;
  width: 50px;

  border: solid 1px red; 
  margin: 1px; 
  box-sizing: border-box; 
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

</div>

https://codepen.io/SakerONE/pen/zJxXXN

How to make container width to grow with the number of columns? Now the width of the container is only one column (50px).

Did you know that you can write embedded css and html inside stack overflow? — dwjohnston, Aug 22 '18 at 10:47
I made some edits to the css to make the issue a little clearer. — dwjohnston, Aug 22 '18 at 10:54

Tom Barden · Answer 1 · 2018-08-22T10:51:31.630

0

Do you not just want to use flex-direction:row?. You can limit the number of items per row with the use of flex-basis on each item.

flex-basis:33% on each item will limit to 3 items per row.

Alternatively, use height:auto on .container.

edited Aug 22 '18 at 10:51

answered Aug 22 '18 at 10:50

Tom Barden

326
2
13

No. He's clearly writing things in columns. – dwjohnston Aug 22 '18 at 10:51
Edited my answer. – Tom Barden Aug 22 '18 at 10:53
Didn't understand how height auto will help, fixed height is needed to make multiple columns – Artem Svirskyi Aug 22 '18 at 11:01

Multi-line flexbox, container width is only one column

1 Answers1