Max-width not working on Flexbox item (item is shrinking to width of content) - css

Question

I have a full viewport width, full viewport height "hero image" on a homepage. I've made this a Flex container. Inside the flex container is one child div (containing a heading). This flex item should be aligned to the bottom of the flex container. It has a max-width and should be horizontally centered inside the parent.
However, the max-width is being ignored. The div is taking the width of its content - the heading. Please see JS Fiddle: https://jsfiddle.net/4h7q6d5x/
As you can see the .main div inside the hero image is taking the width of its content - unlike the .main div below the hero image.
I have looked at various questions, including this one max-width not working on flex item
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
How do I get max-width to work with 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

The default "width" (actually flex-basis) inside flex-containers is auto which makes it only as wide as it's content.
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
Then I'd suggest a couple of changes. Don't use a flex-column but position your .main div using align-items:flex-end.
Then set the default "width" (actually flex-grow) with 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>