Если элемент сетки шириной 0 пикселей содержит элемент шириной 0 пикселей с левым полем больше 0 пикселей, он переполняе ⇐ CSS

[Гость]

Если элемент сетки имеет ширину 0 пикселей содержит элемент шириной 0 пикселей со значением свойства CSS "margin-left" больше 0 и размещается на дорожке столбца сетки, размер которой равен «авто». затем он переполняет контейнер сетки в браузере Firefox.

Если ширина элемента сетки превышает 0 пикселей (даже 0,1 пикселя), он не переполняет контейнер сетки. Элемент сетки переполняется, только если для контейнера сетки указано «grid-template-columns» как «1fr auto», и элемент сетки размещается на второй дорожке столбца; переполнение не происходит, если значение "grid-template-columns" равно "auto 1fr" и элемент сетки помещен на первую дорожку столбца.

margin-left приводит к тому, что элемент сетки переполняет контейнер сетки в Firefox тело { маржа: 0; } .контейнер { дисплей: сетка; столбцы-шаблона сетки: 1fr авто; строки-шаблона сетки: 1fr; ширина: 320 пикселей; высота: 320 пикселей; переполнение: авто; цвет фона: белый дым; } .левый { столбцы-шаблона сетки: авто 1fr; } .пункт1, .item2 { начало строки-сетки: 1; } .пункт1, .left > .item2 { начало сетки-столбца: 1; } .пункт2, .left > .item1 { начало сетки-столбца: 2; } .item2 { ширина: 48 пикселей; переход: ширина 2 с; цвет фона: серебро; } .свернутый { ширина: 0; } .collapsed1 { ширина: 0,1 пикселей; } .внутренний { ширина: расчет (100 % – 16 пикселей); минимальная ширина: 0; высота: 32 пикселей; поле: 8 пикселей; /* вызывает переполнение */ цвет фона: серый; } .no_margins { маржа: 0; } кнопка { поле: 8 пикселей; } константные поля = функция () { document.querySelector('.inner').classList.toggle('no_margins'); } const коллапс0 = функция () { пусть c = document.querySelector('.item2').classList; если (c.contains('collapsed1')) { c.replace('свернутый1', 'свернутый') } еще { c.add('Свернут'); } } const коллапс1 = функция () { пусть c = document.querySelector('.item2').classList; если (c.contains('свернут')) { c.replace('свернутый', 'свернутый1') } еще { c.add('свернутый1'); } } const расширить = функция () { document.querySelector('.item2').classList.remove('collapsed', 'collapsed1'); } константный макет = функция () { document.querySelector('.container').classList.toggle('left'); } const load_handler = функция () { let btns = document.getElementsByTagName('button'); btns[0].addEventListener('клик', поля); btns[1].addEventListener('клик', коллапс0); btns[2].addEventListener('клик', коллапс1); btns[3].addEventListener('щелкните', разверните); btns[4].addEventListener('клик', макет); } addEventListener('load', load_handler); Переключить поля Свернуть до 0 пикселей Свернуть до 0,1 пикселя Развернуть Переключение между двумя макетами

Я обнаружил это в последней версии Firefox 120, я не знаю, с какой версии они впервые внесли эти изменения, но я уверен, что более ранние версии не вели себя таким образом. Я мог бы указать «видимость» для элемента сетки как «авто» или «скрытый» в качестве обходного пути или обернуть div, содержащийся в элементе сетки, в другой div и указать «видимость» как «авто» или «скрытый» для оболочки. div, но у меня вопрос: это ошибка или предполагаемое поведение, соответствующее спецификации, связанной с макетом Grid?