Почему гибкий элемент ограничен родительским размером?

Ответ 1

Вы должны рассмотреть flex-shrink. Как вы можете прочитать здесь:

Свойство CSS flex-shrink указывает коэффициент гибкости flex для гибкого элемента. Элементы Flex будут сокращаться, чтобы заполнить контейнер в соответствии с номером гибкой усадки, когда размер гибких элементов по умолчанию больше, чем гибкий контейнер.

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
  flex-shrink: 0; /* added this */
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
  </div>
</div>