0

I have a two column layout with flexbox and flex-wrap: wrap set on the parent of the columns. However the columns are not wrapping even though the contents are clearly wider than the width percentage that the column is set to. How do I get the column to wrap when the contents are wider than the percentage width?

.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  width: 300px;
}
.left {
  width: 60%;
  background-color: lightblue;
}
.right {
  width: 40%;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="left">
    <table><tbody>
      <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr>
    </tbody></table>
  </div>
  <div class="right"></div>
</div>
Chic
  • 9,836
  • 4
  • 33
  • 62

1 Answers1

0

The columns aren't wrapping because the column isn't growing. You can fix this by changing the width property of the column(s) to a flex-basis property. The flex-basis is the starting point for the flex calculation but the width will be adjusted as needed. See What are the differences between flex-basis and width for more details.

.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  width: 300px;
}
.left {
  flex-basis: 60%;
  background-color: lightblue;
}
.right {
  flex-basis: 40%;
  background-color: lightcoral;
}
<div class="wrapper">
  <div class="left">
    <table><tbody>
      <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td></tr>
    </tbody></table>
  </div>
  <div class="right"></div>
</div>
Chic
  • 9,836
  • 4
  • 33
  • 62
  • 1
    add `min-width: 0;` to your element and you will get back to your initial issue. Flex basis works because of the min-width contraint that isn't applyied when dealing with width (you can get it back by adding `min-width: min-content;` to your first code which is another alternative to fix your issue) – Temani Afif Jan 24 '20 at 23:03