Элемент с шириной fit-content и ограничением max-width: 100% может выходить за пределы экрана по нескольким причинам, которые я опишу подробно.
1. У контейнера есть внешние отступы (margin). По умолчанию, внешние отступы элемента могут добавляться к его ширине, что приводит к увеличению его общей ширины. Если элемент с шириной fit-content и ограничением max-width: 100% содержит внешние отступы, он может выходить за пределы экрана. В этом случае, рекомендуется проверить и, если необходимо, уменьшить ширину элемента или отступы.
2. У контейнера есть внутренние отступы (padding). По аналогии с внешними отступами, внутренние отступы элемента также могут добавляться к его ширине, что может привести к выходу за пределы экрана. Решением может быть уменьшение ширины элемента или удаление внутренних отступов.
3. У контейнера есть рамка (border). По умолчанию, толщина рамки добавляется к общей ширине элемента. Если у элемента с шириной fit-content и ограничением max-width: 100% есть толщина рамки, она может превышать доступное пространство на экране. В данном случае, можно попробовать уменьшить ширину элемента или убрать рамку, если это возможно.
4. Контент внутри элемента превышает его ширину. Если внутренний контент элемента превышает его ширину, то он может выходить за пределы экрана, независимо от установленных свойств fit-content и max-width: 100%. В этом случае, нужно пересмотреть содержимое элемента и, возможно, уменьшить его размер или выполнить другие изменения для того, чтобы контент помещался внутри указанной ширины.
5. Масштабирование браузера. Некоторые браузеры или настройки могут влиять на способ масштабирования элементов на странице. Возможно, браузер масштабирует страницу так, что элемент с шириной fit-content и ограничением max-width: 100% выходит за пределы экрана. В этом случае, стоит проверить настройки масштабирования в браузере и, при необходимости, изменить их или добавить дополнительные стили для адаптации элемента к различным размерам экранов.
Учитывая все эти возможные причины, можно принять меры, чтобы элемент с шириной fit-content и ограничением max-width: 100% не выходил за пределы экрана, в зависимости от конкретной ситуации и требований проекта.