div要素を縦書きで並べた時に、空のdiv要素が消えてしまう

Question

やりたいこと

下記の動画のように、親要素(wrapper)の中に５つの子要素を配置し、縦書きに並べています。子要素の内容は動的に変わることを想定し、空文字の場合もwidthは揃えたいと思っています。

質問

上記の動画のように、親要素のwidthが小さくなると空のdiv要素が潰れてしまいます。親要素にoverflow: scroll;を設定してもダメでした。

対処する方法がありましたらご教示いただけると助かります。

コード（上記動画と同じです）

<div class="wrapper">
  <div class="item">一列目</div>
  <div class="item"></div>
  <div class="item">三列目</div>
  <div class="item">四列目</div>
  <div class="item">五列目</div>
</div>  

.wrapper {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: flex;
  overflow: scroll;
}
.item {
  background: pink;
  margin: 2px;
  width: 40px;
  writing-mode: vertical-lr;
}

Answer 1

flex-shrink:0;を追加したらどうでしょう。

.item {
  flex-shrink:0; /* 追加 */
  background: pink;
  margin: 2px;
  width: 30px;
  writing-mode: vertical-lr;
}

あるいは、min-width;で空でも確保したい幅を設定するとか。

.item {
  flex-shrink:0; /* 追加 */
  background: pink;
  margin: 2px;
  width: 40px;
  min-width: 20px;
  writing-mode: vertical-lr;
}

微妙に動作が異なるようなのでご希望の方を。