CSS Flexbox children items not taking up full available width

user_2860439 0
Viewed 1065

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:

enter image description here

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.

enter image description 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?

flexbox sass css-selectors css html
4 Answers

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;
  }
}
user_125755080

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

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

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/

user_140142580

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>

user_140161200
Related