12

In mdn

  • flex:1

means the same as

  • flex-grow:1.

However, in fact it has different show in browser.

You can try it in this jsFiddle by changing the comment in css.

When I use flex: 1 the element who's classname is test-container will be height:100% but it won't happen when you use flex-grow: 1.

I don't understand why. Looking for some help. Thanks very much.

.flex-1 {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: red;
}

.child-1 {
  height: 50px;
  background: blue;
}

.child-2 {
  flex-grow: 1;
  /* flex:1; */
  background: green;
}

.test-container {
  display: flex;
  flex-direction: row;
  background: white;
  height: 100%;
}
<div class="flex-1">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="test-container"></div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
baihaihui
  • 153
  • 1
  • 7

2 Answers2

22

flex

The flex property is a shorthand for setting:

  • flex-grow
  • flex-shrink
  • flex-basis

The flex: 1 rule is supposed to compute to this:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

These values are defined in the spec. See section 7.1.1. Basic Values of flex

I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as px or %, is appended to the 0 value in flex-basis. This can make a difference (example).

flex-grow

The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and flex-basis at their initial values.

So when you set flex-grow: 1, the browser renders this:

The difference between flex: 1 and flex-grow: 1

Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0, and the latter keeps the default flex-basis: auto.

For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:

Your code example

The reason you're seeing a difference in your code is that flex-basis controls height in a column-direction container.

In Chrome, with flex-basis: auto, the height of the element is 450px (500px parent - 50px header). In other words, flex-grow is free to distribute the free space.

With flex-basis: 0, the height of the element is 0, and flex-grow has no free space to distribute.

The height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:

In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • first of all ,thanks for you help.after read all of the posts you given.l get the reason of my code example is that when `flex-basis` is `auto`,`height:100%` doesn't work because the container's height is none.when you set the `flex-basis` a specific value the `height:100%` can get the `height of what`. You say the `flex-basis:auto` make the element height is 450px.if the element is 450px why the `height:100%` doesn't work? The container element alreday has a specific height. – baihaihui Aug 21 '17 at 04:22
  • The element is 450px tall because of `flex-grow: 1`, not because of `height: 100%`. – Michael Benjamin Aug 21 '17 at 04:25
  • l agree 'the element is 450px tall because of `flex-grow:1`, not because of `height:100%`'.However, no matter the value of `flex-basis` is what , the height of the container element(who's background is green) will be 450px. Accroding to the [Make flex-grow expand items based on their original size](https://stackoverflow.com/questions/43520932/make-flex-grow-expand-items-based-on-their-original-size). When the `flex-basis:0` the child element's(who's background is white) height should be 0 and `flex-grow` is free to distribute the free space(450px). – baihaihui Aug 22 '17 at 02:09
  • When the `flex-basis:auto` the basis of the child element will be 0 too.it doesn't have a specific height or some content.it's just a empty `div`.So there still has 450px to distribute.In my opinion, the difference between the two value is the specific value of height.Maybe l walk to a wrong direction, thank you again. – baihaihui Aug 22 '17 at 02:18
  • See my last two link references. There is confusion because browsers render percentage heights differently in flex containers. It's not consistent or reliable. – Michael Benjamin Aug 22 '17 at 11:45
  • 1
    than you very much.l understand now.great answer – baihaihui Aug 22 '17 at 13:59
  • @MichaelBenjamin I can't find words to thank you. I'm so grateful for all your answers related to the flexbox. Now I can say I understand flexbox. another request please could you suggest any useful resources and great as your answers to read about Grid layout? – Medi Dec 20 '20 at 22:22
1

l get the reason why that happen. In fact

flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

the key is the flex-basis:0%. If you use flex-grow:1,the flex-basis will be auto. In this sutation, you can't let the height:100% work .

However I don't sure when the

flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

will happen. In the doc

flex:1 !== flex-grow:1;flex-shrink:1;flex-basis:0%

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
baihaihui
  • 153
  • 1
  • 7