Flex can't get the height of a child item to the height of a flex item with Epiphany

Question

I have a grid of block in which other block are also contained in flex blocks.

The problem I have is that the height is ignored in the children of the flex-item of the grid in epiphany. It appears to display correctly with firefox and chromium.

The result I obtain with epiphany is the first block being longer than the 2 following blocks. While on firefox and chrome, all blocks have the same height on the first row and expend accordingly on each rows if necessary.

.container {
  width: 20rem;
  height: 20rem;
  overflow: auto;
}

.b2 {
  height: 100%;
  background: pink;
}

.widgets {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.widget {
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  height: 100%;
  overflow: hidden;
}

.r1 {
  padding: 0.25rem;
}
.r2 {
  padding: 0.25rem;
  background: red;
  color: white;
}

<div class="container">
<div class="widgets">
  <div class="widget">
    <div class="box">
      <div class="r1">
      asdasdasdasd akjsdha ksjdh askjdh askjdh asd
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="b2">
    
    
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
    <div class="widget">
    <div class="box">
      <div class="r1">
      1
      </div>
      <div class="r2">
      2
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

Ok, I found the problem thanks to Micheal_B. The problem is that I'm adding an extra container that isn't a flexbox. Which seems to be handled correctly in newer browsers. My guess is it's a bug in the unfinished flexbox spec. Since my epiphany browser only allow -webkit prefixed version of flex I'd believe it's based on draft of the flexbox. This would explain why it works on chromium and firefox.

As explained in this link: Why is percentage height not working on my div?

The percentage height is trying to get the height of the parent node which is set to default... but the height is controlled by the flexbox layout. My guess is that the flexbox layout is buggy and doesn't relay the height correctly to the sub element which makes relative heigh fail. For example, if I set a fixed height to the parent element it will work correctly because the flexlayout will use the fixed height.

That said, I noticed in dev mode that the height of the flex item was correctly stretched while the .box item couldn't stretch using the height property. As suggested in this answer: Chrome / Safari not filling 100% height of flex parent

Go all the way using flexlayout. Which is what will make this html work fine. All I had to do is make the .widget object a flexbox which will require the sub element to stretch within it and remove all the height css properties. Then the browser will rely only on the flex layout to set the height except for the fixed height defined in css.

.widget {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-grow: 1;
  -webkit-flex-basis: 1 ;
  -webkit-align-items: stretch;
  margin: 1rem;
}

.box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  background: grey;
  width: 4rem;
  overflow: hidden;
}

Here are the changes I had to make.