title: Max-width not working on Flexbox item (item is shrinking to width of content)
body: <p>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.</p>
  
  <p>However, the max-width is being ignored. The div is taking the width of its content - the heading. Please see JS Fiddle: <a href="https://jsfiddle.net/4h7q6d5x/" rel="nofollow noreferrer">https://jsfiddle.net/4h7q6d5x/</a></p>
  
  <p>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.</p>
  
  <p>I have looked at various questions, including this one <a href="https://stackoverflow.com/questions/43705866/max-width-not-working-on-flex-item">max-width not working on flex item</a></p>
  
  <p>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.</p>
  
  <p>How do I get max-width to work with Flexbox?</p>
  
  <pre><code>.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;
      }
  
  
  &lt;div class="hero_image"&gt;
      &lt;div class="main"&gt;
          &lt;h1&gt;Heading &lt;br&gt;couple of words&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="main"&gt;
      &lt;p&gt;Lots of content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>