html - 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?

标签： htmlcsssassflexboxcss-selectors

Answer 1

如果你需要让.card-titleand.card-data元素占据卡片宽度的一半，以及定位到左侧和右侧，试试这个：

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

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

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