how to make child in flex go full width?
<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>