When you value Flex-Basis as a percentage, why doesn't it do the same with Flex Grow?

user_13738853 0
Viewed 556

I have also examined various documents but could not understand the logic in the code below. Let's say we gave 25% for Flex-Basis. As you can see when we give Flex-Grow 0.25 to the other box with the same features, the dimensions are different, but shouldn't it be the same?

Also, what is the difference between using the flex basis as a percentage and using flexible growth? Thank you very much for your interest in advance.

html body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 90%;
  margin: 2em auto;
  height: 35px;
  display: flex;
  background: rgb(51, 153, 73);
}

.box {
  flex-basis: auto;
  background: rgb(160, 166, 221);
}

.second {
  flex-basis: 25%;
}

.third {
  flex-grow: 0.25;
}
<div class="container">
  <div class="box first">First Box</div>
</div>
<div class="container">
  <div class="box second">Second Box</div>
</div>
<div class="container">
  <div class="box third">Third Box</div>
</div>

flexbox css html
1 Answers

You can have the same result if you define flex-basis:0 with flex-grow.

flex-basis:25% means take 25% of the total width while flex-grow:0.25 means take 25% of the free space + the initial width. If you make the initial width 0 (using flex-basis:0) then 25% of the free space will be equal to 25% of the total width

html body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 90%;
  margin: 2em auto;
  height: 35px;
  display: flex;
  background: rgb(51, 153, 73);
}

.box {
  flex-basis: auto;
  background: rgb(160, 166, 221);
}

.second {
  flex-basis: 25%;
}

.third {
  flex-grow: 0.25;
  flex-basis: 0;
}
<div class="container">
  <div class="box first">First Box</div>
</div>
<div class="container">
  <div class="box second">Second Box</div>
</div>
<div class="container">
  <div class="box third">Third Box</div>
</div>

user_86203330
Related