Expand flexbox element to its contents?

Question

I'm trying to use flexbox to arrange the elements below so the div.container and div.right widths to depend on the content (number of green boxes). I believe it's an issue with "flex-flow: row wrap;" that is used on div.right

Any idea what I'm missing? Thanks!

This is my code output

This I'm trying to achive

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>