角度材料の略語を使用したネストされたフレックスレイアウトの問題

次のレイアウトで何が問題なのか苦労しています。角度材料の略語を使用したネストされたフレックスレイアウトの問題

VHが小さすぎる場合（スニペットでoverflow-y:scrollとborder: 3px solid blackとマークされている）、スクロール可能なSPACEレイアウトを維持しようとしていますが、親divはビューポートの境界に従う必要があります。

http://codepen.io/minikrob/pen/yJKzKj
例：http://i.imgur.com/zq0tbx5.png

誰もがこれを達成する方法についてのアイデアを持っていますか？

編集：Google Chromeの古いバージョンで問題でした...もう一度@kuhnroyalに感謝します& @Chanthu！

出典

2016-07-21 Minikrob

黒の境界線と内側容器を使用すると、スクロールしたいものである場合、これを見て：http://codepen.io/anon/pen/Wxzkmr

修正は要素.pusherと#content-wrapperにheight:100%;を追加することでした。

どのように修正できますか？うーん... CSSは変だ。

出典

2016-07-21 10:00:19 Chanthu

スクロール可能な要素には、角のある材質のlayout="column|rowを親に使用し、md-contentを使用する必要があります。ここで

<div flex="" class="maincontent pushable" layout="column"> 
    <div flex="" class="pusher" layout="column"> 
    <!-- ngView: content-wrapper --> 
    <md-content id="content-wrapper" flex="">

は作業ペンです：http://codepen.io/kuhnroyal/pen/QEmOvk

そして、あなたは** https://material.angularjs.org/latest/layout/container

出典

2016-07-21 10:59:45 kuhnroyal

おかげ** kuhnroyalを読み、** Chanthu必要があります**答えるために、事は私が必要です： - 緑色の境界線divは、オレンジ色の境界線1にフレキシブルに縮小されます。 - 緑の境界線に含まれる黒い境界線1つ、余白を含むここでは、習得しようとしている： http://i.imgur.com/zq0tbx5.png – Minikrob

私が知ることから、これはペンの動作とまったく同じです。 – kuhnroyal

さて、ありがとう、ありがとう、問題はあなたが効果的にFFで動作するようにクロムから来ているようだ...今根本的な問題を見つけるために...もう一度ありがとう！ – Minikrob

角度材料の略語を使用したネストされたフレックスレイアウトの問題

答えて

関連する問題