css flexbox item width grows unexpectedly

Question

The following code...

  .flexbox-container1 {
  background-color: crimson;
  display: flex;
  gap: 10px;
  justify-content: center;
  height: 100%;
}

.flexbox-items1 {
  height: 200px;
  flex-grow: 1;
  align-self: center;

<div class="flexbox-container1">
  <div class="flexbox-items1" style="background-color: green;"></div>
  <div class="flexbox-items1" style="background-color: green;"></div>
</div>

creates this layout:

However, when I add content (e.g. some text) to one of the flexbox-items (green), it grows, compared to the other:

I don't know why this happens and I don't want it to happen. How can I make it so that it keeps its width as prescribed (1fr)? Why does it grow in the first place? After all, the content I added does not take up so much space that the div has to increase its width... Thanks in advance for your help.

score 1 · Accepted Answer · answered Oct 18 '20 at 18:21

Replace flex-grow with flex only because when you add flex-grow as soon as you add some contents in that container it will make it grow so use flex instead.

Example

  .flexbox-container1 {
  background-color: crimson;
  display: flex;
  gap: 10px;
  justify-content: center;
  height: 100%;
}

.flexbox-items1 {
  height: 200px;
  flex: 1;
  align-self: center;

<div class="flexbox-container1">
  <div class="flexbox-items1" style="background-color: green;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flexbox-items1" style="background-color: green;"></div>
</div>

css flexbox item width grows unexpectedly

1 Answers1

Example