CSS Flexbox children items not taking up full available width

Question

I'm trying to position the title of a card component to the left most side and some other data to the right most, as shown in the picture below:

the component I've written for this looks like the following:

    <div className="card">
      <div className="card-title">Some Title</div>
      <div className="card-data">
        <span>{`Some data: 07/22/2020`}</span>
        <span>TEST</span>
      </div>
    </div>

For the CSS, I've seen from several previous posts that a solution is to assign flex-grow:1 or flex: 1 1 auto to the children items. For that I've done the following:

.card {
  display: flex;
  justify-content: space-between;
  .card-title {
    flex: 1;
  }
  .card-data {
     flex: 1;
  }
}

Despite specifying the flex-grow to be 1, it's not taking up the full space of the content, as highlighted here.

The card div is literally at the top of the component so nothing else is messing with the styles here. Is there any other property/specification needed here to make the two divs take up the full width?

Answer 1

If you need to make the .card-title and .card-data elements take up half of the card width, as well as being positioned to the left and right side, try this:

.card {
  display: flex;
  justify-content: space-between;

  .card-title {
    flex-grow: 1;
  }

  .card-data {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  }
}

Answer 2

Don't use flex: 1 in card-title and card-data just use flex property on card.

.card {
  display: flex;
  justify-content: space-between;
}

Answer 3

Can't see anything wrong, should just work using what you wrote and applying flex-grow: 1 or flex: 1 to the children elements of the card. You got something else in your CSS/DOM that interferes.

https://jsfiddle.net/cg9y3mv6/

Answer 4

Actually, you need to define class on element as class attribute not className. Than everything will work

 <div class="card"> <div class="card-title">Some Title</div> <div class="card-data"> <span>{`Some data: 07/22/2020`}</span> <span>TEST</span> </div> </div>