为什么div在使用display时收缩：flex？

Question

为什么div在使用display时收缩：flex。我想水平滚动我的div。但它没有取宽度100和100？

.wrapper {
  display: flex;
  width: 300px;
  overflow-x: auto;
}

.box {
  height: 100px;
  width: 100px;
  margin-right: 10px;
  background-color: blue
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>


</div>