Блог

Главная - Вопросы по программированию - Проблема с высотой CSS Chromium 91 Flexbox

Проблема с высотой CSS Chromium 91 Flexbox

#css #flexbox #height #chromium

Вопрос:

С момента последнего обновления Chrome до версии 91 у меня возникла ошибка в расчете высоты с помощью элементов flexbox.

У меня есть большая таблица, которая управляется контейнером, который принимает остальную часть страницы за ее высоту (с помощью flex 1). Но начиная с Chrome 91 высота контейнера выходит за пределы досягаемости.

Обратите внимание, что эта проблема возникает из-за сгиба вложенной строки.

 html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  height: 30px;
}

.column {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.flex1 {
  flex: 1;
}

.container {
  overflow: auto;
}

table {
  border: 1px solid black;
  height: 0;
  width: 100%;
} 
 <div class="column flex1">
  <div class="header">
    Header
  </div>
  <div class="row flex1">
    <div class="column flex1">
      Left part
    </div>
    <div class="column flex1">
      <div>
        Header Table
      </div>
      <div class="container column flex1">
        <table>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
          <tr><td>Value</td></tr>
        </table>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. Похоже, высота принудительно регулируется в соответствии с самым длинным элементом. мой личный веб-сайт, использующий теги таблиц, имеет ту же проблему в Chrome 91.

2. Добавить min-height: 0 в flex1 класс. Смотрите этот пост .

Метки: