Flexbox не переносится, когда содержимое слишком широкое - PullRequest
0 голосов
/ 25 января 2020

У меня есть макет из двух столбцов с 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>

1 Ответ

0 голосов
/ 25 января 2020

Столбцы не переносятся, потому что столбец не растет. Это можно исправить, изменив свойство width столбцов на свойство flex-basis. Основа гибкости - это отправная точка для расчета гибкости, но ширина будет корректироваться по мере необходимости. См. В чем различия между flex-base и width для получения более подробной информации.

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...