What Are the Differences Between Flex-Basis and Width

What are the differences between flex-basis and width?

Consider flex-direction

The first thing that comes to mind when reading your question is that flex-basis doesn't always apply to width.

When flex-direction is row, flex-basis controls width.

But when flex-direction is column, flex-basis controls height.

Key Differences

Here are some important differences between flex-basis and width / height:

• flex-basis applies only to flex items. Flex containers (that aren't also flex items) will ignore flex-basis but can use width and height.

• flex-basis works only on the main axis. For example, if you're in flex-direction: column, the width property would be needed for sizing flex items horizontally.

• flex-basis has no effect on absolutely-positioned flex items. width and height properties would be necessary. Absolutely-positioned flex items do not participate in flex layout.

• By using the flex property, three properties – flex-grow, flex-shrink and flex-basis – can be neatly combined into one declaration. Using width, the same rule would require multiple lines of code.

Browser Behavior

In terms of how they are rendered, there should be no difference between flex-basis and width, unless flex-basis is auto or content.

From the spec:

7.2.3. The flex-basis property

For all values other than auto and content, flex-basis is resolved the same way as width in horizontal writing modes.

But the impact of auto or content may be minimal or nothing at all. More from the spec:

auto

When specified on a flex item, the auto keyword retrieves the value
of the main size property as the used flex-basis. If that value is
itself auto, then the used value is content.

content

Indicates automatic sizing, based on the flex item’s content.

Note: This value was not present in the initial release of Flexible
Box Layout, and thus some older implementations will not support it.
The equivalent effect can be achieved by using auto together with a
main size (width or height) of auto.

So, according to the spec, flex-basis and width resolve identically, unless flex-basis is auto or content. In such cases, flex-basis may use content width (which, presumably, the width property would use, as well).

The flex-shrink factor

It's important to remember the initial settings of a flex container. Some of these settings include:

• flex-direction: row - flex items will align horizontally
• justify-content: flex-start - flex items will stack at the start of the line on the main axis
• align-items: stretch - flex items will expand to cover the cross-size of the container
• flex-wrap: nowrap - flex items are forced to stay in a single line
• flex-shrink: 1 - a flex item is allowed to shrink

Note the last setting.

Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis / width / height may be overridden.

For example, flex-basis: 100px or width: 100px, coupled with flex-shrink: 1, will not necessarily be 100px.

To render the specified width – and keep it fixed – you will need to disable shrinking:

div {
   width: 100px;
   flex-shrink: 0;
}  

OR

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

OR, as recommended by the spec:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Components of
Flexibility

Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.

Browser Bugs

Some browsers have trouble sizing flex items in nested flex containers.

flex-basis ignored in a nested flex container. width works.

When using flex-basis, the container ignores the sizing of its children, and the children overflow the container. But with the width property, the container respects the sizing of its children and expands accordingly.

References:

• Chrome does not expand flex parent according to children's content
• Flex item overflowing when using flex-basis
• Difference between width and flex-basis
• Flex-basis is being ignored when sizing nested flex containers.
• flex-basis:100px does something different from width:100px+flex-basis:auto

Examples:

• https://jsfiddle.net/t419zhra/ (source: @Dremora)
• https://codepen.io/anon/pen/NVxaoy (source @Daniel)
• https://jsfiddle.net/voc9grx6/ (source: Chromium Bugs)
• https://jsfiddle.net/qjpat9zk/ (source: Chromium Bugs)

flex items using flex-basis and white-space: nowrap overflow inline-flex container. width works.

It seems that a flex container set to inline-flex doesn't recognize flex-basis on a child when rendering a sibling with white-space: nowrap (although it could just be an item with undefined width). The container doesn't expand to accommodate the items.

But when the width property is used instead of flex-basis, the container respects the sizing of its children and expands accordingly. This is not a problem in IE11 and Edge.

References:

• inline flex container width not growing
• Inline flex container (display: inline-flex) is expanding the full width of parent container

Example:

• https://jsfiddle.net/p18h0jxt/1/ (from first post above)

flex-basis (and flex-grow) not working on table element

References:

• Why does flex-box work with a div, but not a table?
• Why doesn't flex-grow: 1 work for a table in Safari? (and Edge)

flex-basis fails in Chrome and Firefox when the grandparent container is a shrink-to-fit element. The set-up works fine in Edge.

• Absolutely positioned container not expanding width to fit flexbox content

Like in the example presented in the link above, involving position: absolute, the use of float and inline-block, will also render the same flawed output (jsfiddle demo).

Bugs affecting IE 10 and 11:

• flex shorthand declarations with unitless flex-basis values are ignored
• flex-basis doesn't account for box-sizing: border-box
• flex-basis doesn't support calc()
• Importance is ignored on flex-basis when using flex shorthand

Difference between width and flex-basis

This seems to be a bug.
An element which is both flex container and flex item seems to be ignoring intrinsic dimensions of its children if they are set via flex-basis, instead choosing to measure the width/height of contents of its children instead. It is ironic that IE11/Edge is the only browser implementing this correctly.

Chromium bug tracker

What are the differences between flex-grow and width?

width and flex-grow are two entirely different CSS properties.

The width property is used for defining the width of elements.

The flex-grow property is used for distributing free space in a flex container. This property doesn't apply a specific length to an element, like the width property. It simply allows a flex item to consume whatever space may be available.

Sometimes if I want one element to grow the rest of the space, I can either do width: 100% or flex-grow: 1. How do I choose?

Yes, if there is one element in the row, width: 100% and flex-grow: 1 may have the same effect (depending on padding, border and box-sizing settings).

But what if there are two elements, and you want the second one to take the remaining space? With a sibling in the container, width: 100% causes an overflow. I guess you can do something like this:

width: calc(100% - width of sibling);

But what if the sibling's width is dynamic or unknown? calc is no longer an option.

The quick and easy solution is flex-grow: 1.

While width and flex-grow are apples-to-oranges, width and flex-basis are apples-to-apples.

The flex-basis property sets the initial main size of a flex item and is similar to width.

• What are the differences between flex-basis and width?

For the differences between flex-basis and flex-grow see:

• flex-grow not sizing flex items as expected

What does auto and content value of flex-basis do

The only difference in the behavior of those two values is what they do when the width property is defined for the element.

flex-basis: content

The "content" value will just set the width according to the element's content. It doesn't matter if you've defined a width for the element through the width property, it would be ignored.

ul {
  display: flex;
  list-style-type: none;
}
ul li {
  background-color: green;
  margin: 5px;
  width: 100px;
  flex-basis: content;
}

<html>
  <body>
    <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
    </ul>
  </body>
</html>

flex-basis = height (in a column-direction container)

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}

<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>

#flex-item-1 {
  flex-basis: 0%;
  flex-grow: 3;
  background-color: tomato;
/*   width: 75%; */
}

#flex-item-2 {
  flex-basis: 0%;
  flex-grow: 1;
  background-color: pink;
/*   width: 25%; */
}