Почему элемент с шириной fit-content и ограничением max-width: 100% выходит пределы экрана?

Question

[historydev]

width: fit-content;
        max-width: calc(100% - 72px);
        background: #FFCCFF;
        border: 0;
        border-radius: 4px;
        margin: 40px 24px 30px auto;
        position: relative;
        padding-top: 10px;

Comments

[Ankhena]

Встречный вопрос: а куда ему деваться? Переносов в "слове" нет, принудительных вы не сделали, как переносить автоматом не сказали. Вот он и вываливается.

Answer 1

[Ivan Ustûžanin]

элемент не выходит, а переполняется, overflow: hidden покажет это, чтобы текст при нехватке места тоже рубился есть https://developer.mozilla.org/en-US/docs/Web/CSS/o...

также есть https://developer.mozilla.org/en-US/docs/Web/CSS/b..., если используются паддинги и бордеры