how to make child in flex go full width?
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>Just add this css rule:
flex: auto;
You can add align-self:stretch on the .btn-group.
Here is a demo : https://jsfiddle.net/f5noh2q7/1/