将flexbox元素扩展为其内容？

Question

我尝试使用flexbox来排列下面的元素，以便 div.container 和 div.right 宽度取决于内容（绿色数量）框）。我认为这是＆＃34; flex-flow：row wrap;＆＃34;用于 div.right

知道我错过了什么吗？谢谢！

这是我的代码输出

我试图实现这一点

＆＃13;

＆＃13;

for i in range(3):
    for i in range(4):
        print("i = %s" % i)

＆＃13;

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;
  
}

＆＃13;

＆＃13;

＆＃13;