Как лучше растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?

Чтобы вложенный блок растягивался на доступную ширину, но не вылезал за пределы страницы, обычно достаточно правильно использовать width: 100%, max-width: 100% и убрать фиксированные ширины у внутренних элементов. Если блок находится внутри flex/grid, важен ещё min-width: 0.

Базовый вариант:

.parent {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
 
.child {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

Если внутри flex:

.row {
  display: flex;
}
 
.content {
  flex: 1 1 auto;
  min-width: 0;
}

min-width: 0 часто решает проблему, когда вложенный блок или текст растягивает flex-контейнер шире экрана. Без него flex item может не сжиматься меньше содержимого.

Для изображений, таблиц и pre/code добавьте ограничения:

img, video, iframe {
  max-width: 100%;
  height: auto;
}
 
pre, table {
  max-width: 100%;
  overflow-x: auto;
}

Не используйте width: 100vw внутри обычного контейнера без необходимости. 100vw учитывает ширину viewport и может добавить горизонтальный скролл из-за scrollbar или padding родителя. Если нужно “на всю ширину экрана” из центра контейнера — это отдельный full-bleed приём.

Итог: для обычной адаптивной ширины используйте width: 100%, max-width: 100%, box-sizing: border-box и min-width: 0 в flex/grid. Горизонтальный скролл почти всегда появляется из-за фиксированной ширины, длинного слова, таблицы, pre или 100vw.