【CSS】flexboxでflexコンテナからflexアイテムがはみ出る場合の対策

display; flex;を指定した際、flexコンテナ（親要素）からflexアイテム（子要素）がはみ出てしまうときは、flexアイテムに対してそれぞれ下記の指定をしてあげます。

flex-direction: row; の場合

Flexアイテムにmin-width: 0;を指定

.flex-container{
  display: flex;
  flex-direction: row;
}

.flex-item{
  min-width: 0;
}

flex-direction: column; の場合

Flex アイテムにmax-width: 100%;を指定

.flex-container{
  display: flex;
  flex-direction: column;
}

.flex-item{
  max-width: 100%;
}