HTML & CSS: как не надо

При увеличении количества текста он вывалится наружу и может наложиться на нижележащие элементы.

Можно отредактировать исходный HTML, а можно выполнить в консоли браузера такую команду:

document.body.contentEditable = true

После этого вы сможете отредактировать любой текст на странице.

Добавим текст:

Решение зависит от того, что нужно сделать. Если у блока по макету есть минимальная высота, но контента недостаточно, чтобы его растянуть, используйте min-height:

• Плохо

  .container {
    height: 150px;
    padding: 10px;
  }

• Хорошо

  .container {
    min-height: 150px;
    padding: 10px;
  }

min-height позволит добиться соответствия макету, а при добавлении контента блок просто вырастет вниз.

Ещё это может быть полезно как временное решение, чтобы разложить блоки по макету, до того, как будет стилизовано содержимое, после этого min-height убирается.

Если же контента достаточно, min-height не нужен, достаточно задать стили для текста и padding для блока, и его размеры будут определяться содержимым.

Если у блока есть явные границы, padding нужно задавать со всех сторон, чтобы при добавлении текста он не упёрся в края:

Изменим текст:

При абсолютном позиционировании блок не влияет на размеры родителя. При увеличении количества текста он не сможет растянуть родительский блок и вывалится наружу.

Как и в предыдущем случае, можно отредактировать исходный HTML или использовать команду в консоли:

document.body.contentEditable = true

После чего добавить текст в интересующий элемент.

В этом случае лучше перенести position:absolute на картинку и добавить min-height, чтобы блок не схлопывался по высоте текста (иначе может вывалиться картинка):

• Плохо

  .block {
    position: relative;
    display: flex;
    width: 600px;
    padding: 20px;
  }
  .block__content {
    position: absolute;
  }
  .block__img {
    margin-left: auto;
  }

• Хорошо

  .block {
    position: relative;
    width: 600px;
    min-height: 350px;
    padding: 20px;
  }
  .block__content {
    z-index: 1;
  }
  .block__img {
    position: absolute;
    top: 20px;
    right: 20px;
  }