0

Look at this fiddle http://jsfiddle.net/q14nuebw/5/

.container {
  position: absolute;
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  max-height: 100px;
  background-color: green;
  padding: 10px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 40px;
  background-color: red;
}
<div class="container">
  <div class="item">111</div>
  <div class="item">222</div>
  <div class="item">333</div>
  <div class="item">444</div>
</div>

container has position:absolute and flex-wrap: wrap. If height is limited, blocks shift to left, but parent block doesn't wrap all blocks, just first column.

Use width: 100% in this case is not a solution. Is it possible with flex blocks to solve this?

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
arra
  • 9
  • 1
  • 2
  • What do you mean "parent block doesn't wrap all blocks, just first column"? I only see one column of "items". Are you asking why the container doesn't expand in width to accommodate the second column of data? – Forty3 Oct 25 '17 at 21:27
  • It cant wrap because you have max-height set there. – izulito Oct 25 '17 at 21:38

0 Answers0