Максимальная ширина не работает для элемента Flexbox (элемент уменьшается до ширины содержимого)

Question

У меня полная ширина окна просмотра, полная высота окна просмотра "изображение героя" на главной странице.Я сделал это контейнер Flex.Внутри гибкого контейнера находится один дочерний элемент div (содержащий заголовок).Этот гибкий элемент должен быть выровнен по дну гибкого контейнера.Он имеет максимальную ширину и должен быть горизонтально центрирован внутри родительского элемента.

Однако максимальная ширина игнорируется.Div принимает ширину своего содержимого - заголовок.Пожалуйста, см. JS Fiddle: https://jsfiddle.net/4h7q6d5x/

Как вы можете видеть .main div внутри изображения героя принимает ширину его содержимого - в отличие от .main div под изображением героя.

Я смотрел на различные вопросы, в том числе этот max-width не работает на элементе flex

Но добавление width: 100% к элементу flex не работает.При меньших размерах окна просмотра ширина и отступ не очень хороши, а заголовок обрезается по правому краю.

Как настроить максимальную ширину для работы с Flexbox?

.hero_image {
    min-height: 100vh;
    background-color:yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    }

.main {
    max-width:500px;
    margin:0 auto;
    padding:0 50px;
    background-color:pink;
    }


<div class="hero_image">
    <div class="main">
        <h1>Heading <br>couple of words</h1>
    </div>
</div>  

<div class="main">
    <p>Lots of content</p>
</div>

Answer 1

Значение по умолчанию "width" (на самом деле flex-basis) внутри flex-контейнеров равно auto, что делает его таким же широким, как его содержимое.

Но добавление ширины: 100% к элементу flex не работает. При меньших размерах окна просмотра ширина и отступ не очень хороши, а заголовок обрезается по правому краю.

Тогда я бы предложил пару изменений. Не используйте flex-колонку, но разместите ваш .main div, используя align-items:flex-end.

Затем установите значение по умолчанию "width" (фактически flex-grow) с помощью flex: 1.

.hero_image {
  min-height: 50vh;
  /* for example */
  background-color: yellow;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.main {
  flex: 1;
  max-width: 50%;
  /* for example */
  margin: 0 auto;
  padding: 0 50px;
  background-color: pink;
}

<div class="hero_image">
  <div class="main">
    <h1>Heading <br>couple of words</h1>
  </div>
</div>

<div class="main">
  <p>Lots of text</p>
</div>