I am facing an issue with a grid of blocks that also contain flex blocks.
The height is being ignored in the children of the flex-item of the grid in the Epiphany browser. The display is correct in Firefox and Chromium.
In Epiphany, the first block appears longer than the following two blocks. However, in Firefox and Chrome, all blocks on the first row have the same height and expand accordingly on subsequent rows if needed.
.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>