'how to make child in flex go full width?

I've started using flex and I love how it works.

I'm using flex layout and I want the btn-group class inside dashboard-body to go full width of the parent. Right now its width is equal to the width of both buttons together.

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 btn-group div to have full width of its parent dashboard-body so I can use the flex property align-content: space-between to have enough space between both buttons.

Is there any better way other than adding margin/padding around buttons to do the same?

Thanks.

Here is the code: 

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
htmlcssflexbox


Solution 1:[1]

This is the right way to achieve that:

.dashboard-body{
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
.btn-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.btn-group a{
  flex:0 0 auto;
}
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

Solution 2:[2]

You can add align-self:stretch on the .btn-group.
Here is a demo : https://jsfiddle.net/f5noh2q7/1/

Solution 3:[3]

Just add this css rule:

flex: auto;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tarek.hms
Solution 2 Mamboleoo
Solution 3 zemil

Related Questions