-1
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
</div>


 .box1{
        background: red;
        width: 100px;
        flex-grow: 1;
    }

    .box2{
        background: green;
        flex-grow:1;
    }

And I see different width in columns : 534px and 463px; Why ? flex-grow is identical

Asons
  • 84,923
  • 12
  • 110
  • 165
zloctb
  • 10,592
  • 8
  • 70
  • 89
  • Well, as your _wrapper_ doesn't have `display: flex`, your `flex-grow` won't be applied since the child elements is not flex items. – Asons Jan 04 '19 at 12:22
  • i use display:flex for wrapper – zloctb Jan 04 '19 at 12:23
  • 1
    No, can't see you do, please add a [mcve] – Asons Jan 04 '19 at 12:24
  • 1
    Furthermore, `flex-grow` make use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared. – Asons Jan 04 '19 at 12:28

1 Answers1

1

Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.

In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.

.wrapper {
  display: flex;
  width:600px;
}

.box1 {
  background: red;
  width: 100px;
  flex-grow: 1;
}

.box2 {
  background: green;
  flex-grow: 1;
}
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • There are many dupes... – Asons Jan 04 '19 at 12:30
  • Thanks but how make equals ? – zloctb Jan 04 '19 at 12:34
  • 1
    @zloctb You set `flex-basis` to `0`, (and remove width). – Asons Jan 04 '19 at 12:35
  • @LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot – Temani Afif Jan 04 '19 at 12:35
  • If you take a good look at the dupe answer, you'll find a link to an answer that does: https://stackoverflow.com/questions/34644807/flex-grow-not-sizing-flex-items-as-expected ... still, updated the dupe link list with the same – Asons Jan 04 '19 at 12:37