0

I'm trying to get multiple wrapped columns of items in flexbox. I have two columns of items in my HTML, call them colA and colB. colA doesn't fit within the container's height, so it wraps into colA1 and colA2. My problem is that colB ends up on top of colA2, not to its right as I'd expect. Here's an example. I've colored colA orange and colB blue. You can see colA wrapping underneath colB (and the overflow columns don't use the bg color at all -- maybe related?)

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}
<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>
GaryO
  • 5,873
  • 1
  • 36
  • 61
  • 2
    do you mean something like this https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width – Ado Oct 25 '18 at 13:12
  • Apparently this is actually a bug in all major browsers' implementations of flex in column mode, as in the SO post @Ado mentions above. There's no good workaround using flex, it appears. – GaryO Oct 25 '18 at 17:21

2 Answers2

0

Your #colA has no height set, put it to auto and the content will fit.

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
  height:auto;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}
<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>
Ramon de Vries
  • 1,312
  • 7
  • 20
-1

the flex wrap in .column tries to keep the contents in one line remove it and you'll get what you have expected you can read more info here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18