Почему flex:1 превышает родительское пространство в Chrome и здесь (фрагмент), но не в Firefox? ⇐ CSS

[Гость]

Я свел свою проблему к минимуму ниже. Холст (красный) не должен выходить за пределы родительского пространства (тело, синий), потому что flex:1 должен увеличивать его до размера оставшегося пространства, а не после него. Даже если я использую flex:1 1 auto, который должен включать flex-shrink, он все равно не работает ни в Chrome, ни здесь (т. е. красный прямоугольник перерастает синий). Но в Firefox он отлично работает.

Что я вижу в Chrome:





Что я вижу в Firefox:





В зависимости от размера вашего экрана вам необходимо изменить значения минимальной и максимальной ширины, чтобы увидеть ошибку.

Кто-нибудь может объяснить, в чем дело?

var cnv,ctx; cnv = document.getElementById('cnv'); ctx = cnv.getContext('2d'); W = cnv.offsetWidth; H = cnv.offsetHeight; cnv.ширина = Вт; cnv.height = H; ctx.strokeStyle = 'красный'; ctx.lineWidth = 10; ctx.strokeRect(0,0,W,H); ctx.font = '18 пикселей без засечек'; ctx.fillText(W,W/2,H/2); html { высота: 90%; ширина: 90%; граница: 5 пикселей сплошной желтый; } тело { высота: 90%; ширина: 90%; граница: 5 пикселей сплошного синего цвета; маржа: 0; дисплей: гибкий; переполнение: скрыто; минимальная высота: 0; } навигация { фон: #99bb55; минимальная ширина: 500 пикселей; максимальная ширина: 500 пикселей; минимальная высота: 0; } #cnv { гибкий:1 1 авто;