Размеры и переполнение

Размер коробки и размер ее содержимого могут не совпасть. Например, карточка имеет ширину 200px, а имя файла без пробелов не помещается в строку. Содержимое выходит за границу: это переполнение.

width, min-width и max-width

Для карточки, которая помещается и на телефоне, и на большом экране:

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 16px;
}

Она занимает доступную ширину, но перестает расти на 480px. border-box включает внутренние отступы в заданную ширину. Если задать min-width: 480px, это будет уже минимальная ширина: на узком экране карточка может не поместиться.

Почему width: 100% иногда шире родителя

При content-box сто процентов задают только ширину содержимого. Отступы и рамка прибавляются к ней. Переключите border-box в примере и посмотрите, как меняется край карточки. Затем уменьшите ширину и включите перенос длинного слова:

<div class="container">  <div class="card">    <p>Название файла:</p>    <span>very_long_filename_without_spaces.png</span>  </div></div>

.container {  width: 240px;  outline: 2px dashed #9a3412;}
.card {  width: 100%;  box-sizing: content-box;  padding: 16px;  border: 2px solid #2563eb;  background: #dbeafe;  color: #172554;  overflow-wrap: normal;  overflow: visible;  font-size: 16px;  line-height: 24px;}
.card p {  margin: 0 0 8px;}

Здесь две независимые проблемы. box-sizing определяет расчет коробки. overflow-wrap: anywhere разрешает перенос длинного слова, которое иначе не помещается. Исправление одной проблемы не исправляет вторую.

Что делать с переполнением

Если текст должен читаться целиком, обрезание обычно не решает задачу. Сначала проверьте ширину, переносы и внутренние отступы. auto уместен, например, у широкой таблицы или кода, которые удобнее прокрутить по горизонтали.

Высота и изображение

height задает высоту. min-height и max-height ограничивают ее снизу и сверху. Для текста часто достаточно автоматической высоты: коробка растет вместе с содержимым. Жесткая высота может обрезать текст при переносах или увеличении шрифта.

Чтобы изображение помещалось в родителя и сохраняло пропорции:

img {
  max-width: 100%;
  height: auto;
}

Так ширина изображения ограничивается шириной родителя, а height: auto сохраняет пропорции. В отличие от width: 100%, это правило не требует занять всю строку. Для фотографии внутри коробки с заранее заданными шириной и высотой подойдет object-fit: cover: пропорции сохранятся, но часть картинки обрежется. contain покажет картинку целиком, оставив свободное место.

Подробнее: размеры элементов на MDN, overflow и overflow-wrap.