Разверните элемент flexbox в его содержимое?

Я пытаюсь использовать flexbox, чтобы упорядочить элементы ниже, чтобы ширина div.container и div.right зависела от содержимого (количество зеленых ящики). Я считаю, что это проблема с "flex-flow: row wrap"; который используется на div.right

Любая идея, что мне не хватает? Спасибо!

Это мой вывод кода

Я пытаюсь добиться успеха

body {
  font-family: arial;
  font-size: 12px;
  color: #fff;
  display: flex;
}

div.container {
  padding: 10px;
  height: 200px;
  background: #7FDBFF;
  display: flex;
}

div.left {
  background: #0074D9;
  width: 100px;
  padding: 10px;
}

div.right {
  background: #3D9970;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
}

div.right span {
  display: block;
  width: 50px;
  padding: 10px 0;
  margin: 5px;
  background: #01FF70;
  text-align: center;
  
}

<div class="container">
  <div class="left">
    left
  </div>

  <div class="right">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
    <span>11</span>
    <span>12</span>
    <span>13</span>
    <span>14</span>
    <span>15</span>
  </div>
</div>

Разверните элемент flexbox в его содержимое?

Ответы