title: how to make child in flex go full width?
body: <p>I've started using flex and I love how it works. </p>
  
  <p>I'm using flex layout and I want the <code>btn-group</code> class inside <code>dashboard-body</code> to go full width of the parent. Right now its width is equal to the width of both buttons together. </p>
  
  <p>What I want to achieve here is adding space between both buttons also I don't want to use margin right or left. I want the <code>btn-group</code> div to have full width of its parent <code>dashboard-body</code> so I can use the flex property <code>align-content: space-between</code> to have enough space between both buttons.</p>
  
  <p>Is there any better way other than adding margin/padding around buttons to do the same?</p>
  
  <p>Thanks.</p>
  
  <p>Here is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dashboard-body {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dashboard-body"&gt;
    &lt;p&gt;You don't have any sales data.&lt;/p&gt;
    &lt;p&gt;Please add a new book or upload CSVs.&lt;/p&gt;
  
    &lt;div class="btn-group"&gt;
      &lt;a href="#"&gt;
        &lt;input class="add-new-book-btn" type="submit" value="Add New Book"&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
        &lt;input class="add-new-book-btn" type="submit" value="Upload CSV"&gt;
      &lt;/a&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>