読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

flexアイテム内のスクロールを有効にする

やりたいこと

display: flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1
そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示になりません。

flexアイテムの大きさはいい感じに分配されつつ、コンテンツがはみ出す時はスクロール表示になってほしいわけです。

試した結果これとほぼ同じ方法で出来ました。

memowomome.hatenablog.com

やり方

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

*1:max-height、max-widthが設定してある場合はその大きさまで

*2:コンテンツの要素が一つの場合はラッパーは必要無し