title: How do you stretch and center item using Flexbox?
body: <p>Take a look at this <a href="https://codepen.io/techsin/pen/JWQgoM" rel="noreferrer">https://codepen.io/techsin/pen/JWQgoM</a></p>
  
  <pre><code>//html
  &lt;div class="nav"&gt; a \ b \ c&lt;/div&gt;
  &lt;div class="box"&gt; no text&lt;/div&gt;
  
  //css
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: stretch;
  }
  
  .box {
    max-width: 800px;
    padding: 30px;
    background-color: gray;
    flex-grow:1; 
  }
  
  
  .nav {
    padding: 30px;
    background-color: purple;
    text-align: center;
    color: #fff;
  }
  </code></pre>
  
  <p>I want box to expand like a block element, but not expand beyond max width, and still be centered. </p>
  
  <p>If I set <code>align-items</code> to stretch on body then box do expands but it gets aligned to left, if set margin auto Or align-items to center, then box stops trying to fill as much as possible width wise.</p>
  
  <p>I simply want box to expand to 800 pixels, but when windows size changes its width also goes down, just like how any regular block element's width would act by default. </p>
  
  <p>Whole reason to use flexbox is to have box also cover remaining height. </p>