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

Answer 1

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.