Избегайте полос прокрутки при изменении размера flexbox в Chrome?

Question

Рассмотрим трио вложенных элементов div.Есть flexbox, содержащий одного ребенка с flex: 1, который в свою очередь содержит одного ребенка с height: 100%.

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.body {
  background-color: blue;
  flex: 1;
}

.inner {
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="body">
    <div class="inner">
      
    </div>
  </div>
</div>

Если вы уменьшите размер окна в Chrome, появится вертикальная полоса прокрутки.Это не происходит в Firefox.Похоже, что Chrome не пересчитывает значение высоты 100% при изменении размера содержащего его элемента.

Это ошибка в Chrome?Можно ли это как-то исправить, с ограничением, что я не могу изменить разметку и должен использовать flexbox?

Answer 1

Похоже, это ошибка Chrome, так как открытие Dev-Tools и отключение / повторное включение flex: 1 решают ее.Я обнаружил, что добавление overflow: hidden к вашему .body решает проблему (по крайней мере, в моем JSFiddle).Я надеюсь, что это поможет вашему делу.

https://jsfiddle.net/a89ksz4d/