У меня есть макет из двух столбцов с flexbox и flex-wrap: wrap
для родительского элемента столбцов. Однако столбцы не переносятся, даже если содержимое явно шире, чем процент ширины, установленный для столбца. Как получить столбец для переноса, когда его содержимое превышает ширину в процентах?
.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>