Epiphanyでフレックスアイテムの高さに子アイテムの高さを得ることができません

Question

フレックスブロックに他のブロックも含まれているグリッドがあります。

私が問題になっているのは、高さがグリフのフレキアイテムの子供たちでは無視されている点です。これは、firefoxとchromiumで正しく表示されるようです。

私がepiphanyで得た結果は、最初のブロックが2つのブロックより長いことです。 firefoxとchromeの場合、すべてのブロックは最初の行で同じ高さを持ち、必要に応じて各行でそれに応じて使います。

.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]を、私はこの問題にMicheal_Bに感謝を発見しました。問題は、フレックスボックスではない追加のコンテナを追加することです。これは、新しいブラウザでは正しく処理されているようです。私の推測では、未完成のflexbox仕様のバグです。私のepiphanyブラウザは-webkitのフレックスのプレフィックスバージョンしか許さないので、フレックスボックスのドラフトに基づいていると思います。これはクロムとファイアフォックスで動作する理由を説明します。

としては、このリンクで説明： Why is percentage height not working on my div?

率の高さがデフォルトに設定されている親ノードの高さを取得しようとしている...しかし、高さはフレキシボックスのレイアウトによって制御されます。私の推測では、フレックスボックスのレイアウトはバグであり、相対的な高さに失敗するサブ要素に正確に高さをリレーしません。たとえば、親要素に固定高さを設定した場合、flexlayoutは固定高さを使用するため、正しく機能します。

これは、フレックスアイテムの高さが.boxアイテムがheightプロパティを使用して伸びないうちに正しくストレッチされていることをdevモードで認識しました。この回答に示唆されているとおり：Chrome/Safari not filling 100% height of flex parent

フレックスレイアウトを使用しています。これは、このhtmlの作業をうまくいくものにします。私がしなければならなかったのは、.widgetオブジェクトをフレックスボックスにすることです。このフレックスボックスでは、サブ要素がその中で伸びてすべての高さCSSプロパティを削除する必要があります。次に、ブラウザはflexレイアウトだけに依存して、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; 
} 

ここでは変更が必要です。