Ｆｌｅｘｂｏｘではみ出た要素を非表示にしたい

Question

cssのflexboxを使ってレイアウトを作っているのですが、flex-wrapには複数行にするか単一行にするかの二択しか用意されていません。
僕ははみ出た行を非表示にしたいのですが、どうやったら実現できるでしょうか?

Answer 1

<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

div{
  width:150px;
  display:flex;
  overflow:hidden;
}
span{
  flex:0 0 48px;
  border:1px solid;
}

こういうのじゃダメですか？

Comments

[liaq]

overflow: hidden;
だとはみ出た要素ではなくはみ出た部分を隠すので、はみ出ている要素が中途半端に見えてしまって不格好なんですよね…

現状flex-wrap: wrap;を使ってx座標が変わったところにopacity: 0;を指定して対処しているのですがより良い解決方法があったら教えていただきたいです。