Как исправить проблему контейнера?

Question

[sciencefront]

пример размер экрана 550

после клика на текст click block
смотрю контейнеры
.app-page-container ширина 502
а .toolbar__elem 510
на 8 пикселей разница
https://codepen.io/Olya097/pen/WNzJBKV

Answer 1

[strelok011]

Ну, хотя бы потому что добавляя класс "modal open" вы добавляете отступ на оборачивающий блок справа padding 8 px. Соответственно написанным вами стилям контент смещается и на него влияют оборачивающие стили, а вот блок тулбара у вас position fixed, эта конструкция вырывает элемент из потока и отступ всей обертки на него не влияет.

Где вы такой замшелый способ прибития футера к низу нашли? Делайте на флексах, контентной части флекс гроу 1, общему контейнеру с флексом минимальную высоту 100% и этого будет достаточно.

Я так понимаю, когда вы хотите отображать модалку и замораживаете скролл, у вас пропадает ширина скроллбара и картинка (если скролл был) начинает скакать. Так вот в случае, когда контента не достаточно на появление скролла, у вас ровно обратная ситуация возникает.
Почитайте про варианты блокирования скролла, возможно найдете более подходящее решение.

Comments

[sciencefront]

strelok011, это не футер , это плавающий блок

[strelok011]

sciencefront, понятно что плавающий, но нужно все равно вводить коррекцию и для него. Возможно включить постоянное отображение скролла, к примеру, либо подключить кастомный скролл, который уберет зависимость от системного скроллбара. Суть не меняется. Причина такого поведения - добавление отступа в стиле модал опен

[cssfish]

для сафари flex-shrink:0 для всех детей еще