flexアイテム内のスクロールを有効にする
やりたいこと
display: flex
内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。
そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示になりません。
各flexアイテムの大きさはいい感じに分配されつつ、コンテンツがはみ出す時はスクロール表示になってほしいわけです。
試した結果これとほぼ同じ方法で出来ました。
やり方
flexアイテム内のコンテンツをラッパーで包みposition: absolute
にする*2。
// Jade .foo .bar .baz .qux ul.wrapper li: i.material-icons looks_one li: i.material-icons looks_two li: i.material-icons looks_3 li: i.material-icons looks_4 li: i.material-icons looks_5 li: i.material-icons looks_6
position: absolute
- looks_one
- looks_two
- looks_3
- looks_4
- looks_5
- looks_6
// Stylus @import 'nib' * position relative .foo size 300px display flex flex-flow column nowrap .bar, .baz, .qux flex 1 1 auto .bar background-color #3399ac .baz background-color #cc3a20 .qux background-color #bee overflow-y auto ul.wrapper absolute top 0 left 0 // ラッパーにposition: absoluteを適用する padding 10px
position: relative
- looks_one
- looks_two
- looks_3
- looks_4
- looks_5
- looks_6
// Stylus @import 'nib' * position relative .foo size 300px display flex flex-flow column nowrap .bar, .baz, .qux flex 1 1 auto .bar background-color #3399ac .baz background-color #cc3a20 .qux background-color #bee overflow-y auto ul.wrapper // position: absoluteの指定無し padding 10px