flex-basis not working as expected

Question

As i understand flex-basis is responsible for deciding the size of an element.

In the example below, I am trying to size all boxes equally to 100px. Just using flex-basis is not achieving the effect.

.each_box {
  -webkit-flex-grow: 0;
  -webkit-flex-shrink: 0;
  -webkit-flex-basis: 100px;

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;

  background-color: yellow;
  height: 50px;

  border: 1px solid black;

}

Plnkr here: http://plnkr.co/edit/LvrrzHWIw1tPGwK05bCU

score 21 · Answer 1 · edited Mar 07 '23 at 15:27

21

I found I had to use min-width as well as flex-basis in Chrome. I'm not sure if I had another problem that caused this.

.flex-container {
  display: flex;
  width: 100%;
}

.flex-child {
  flex-basis: 50%;
  min-width: 50%;
}

Priority: max-width|min-width>flex-basis(not content)>width>flex-basis:max-content

edited Mar 07 '23 at 15:27

ahuigo

2,929
2
25
45

answered Jan 02 '19 at 10:56

Tom Benyon

971
10
15

I had same problem in Firefox. flex-basic is completely ignored, and as the matter a fact, I just use min-width and max-width.. I don't see the need for flex-basic alltogether – Dalibor Apr 08 '20 at 07:45
I had the same issue and that solved this. Is this a bug in chrome? – Shachar Har-Shuv Jun 21 '20 at 15:40
Be sure to check the answer by dholbert. flex-basis works correctly when it is a child of display:flex. display:flex is only active for children of the container that sets such a display characteristic. – Software Prophets Nov 04 '21 at 14:45

score 8 · Answer 2 · answered Jan 26 '15 at 20:48

The flex-grow, flex-shrink, flex-basis properties only have an effect on elements in a flex container -- i.e. elements whose parent has display:flex.

You need to put your each_box divs directly inside of a display:flex element for them to honor their flex-related properties.

Specifically, your markup looks like this (from right clicking one of the yellow divs + hitting "inspect" in Firefox):

<div class="container">
  <!-- ngRepeat: stock in stockList -->
  <div class="ng-scope" ng-repeat="stock in stockList">
    <div class="each_box ng-binding">
    0-FB/100

You've got container styled as display:flex, but that does no good for your each_box elements, because they're grandchildren, separated from the flex container by the display:block ng-scope.

So you either need to get rid of the ng-scope wrapper, or make it also have display:flex.

This was the correct answer! – swisstony Apr 13 '23 at 04:29 — swisstony, Apr 13 '23 at 04:29

score 8 · Answer 3 · answered May 26 '20 at 19:50

8

Be sure to also add: flex-wrap: wrap; because the default value nowrap in order to fit everything in one line can affect the size of the elements (eg: width, flex-basis, etc..).

answered May 26 '20 at 19:50

Juanma Menendez

17,253
7
59
56

1

This is the correct answer not the one that's currently highlighted... – Aspiiire Sep 30 '22 at 10:41

score 1 · Answer 4 · answered Jan 24 '15 at 16:45

1

Add a width: width:100px; flex-basis gives a default proportion, which will then grow or shrink.

answered Jan 24 '15 at 16:45

Anima-t3d

3,431
6
38
56

I want to avoid using width. – runtimeZero Jan 24 '15 at 17:05
Why do you want to avoid using `width` (you can also use `min-width` or `max-width` if needed)? See also [this question](http://stackoverflow.com/questions/23569229/what-exactly-flex-basis-property-sets) – Anima-t3d Jan 24 '15 at 22:41
5

Using an explicit width defeats the purpose of using flexbox.. The box is no longer flexible. – Roy Jun 01 '18 at 12:33
@Roy the OP asks for setting fixed width when using flex. What you want to achieve is have flex handle spacing/sizing as well. – Anima-t3d Jun 05 '18 at 08:01

score 0 · Answer 5 · answered Oct 13 '20 at 21:05

0

All works for me:

.flex-child { width:0; }

AND

.flex-child { min-width:0; }

AND

.flex-child { flex-shrink:0; } /* no scrollbars inside */

answered Oct 13 '20 at 21:05

proseosoc

1,168
14
23

flex-basis not working as expected

5 Answers5