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

// 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

// 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