В чем может быть проблема в структуре на flexbox?

.contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}

.list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.list__content {
  display: flex;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  background: #e7eaef;
}
.list__sidebar {
  -webkit-box-flex: 0;
          flex: 0 1 23.07692%;
  min-width: 200px;
  background: #ccc;
}
.list__row {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  background: #fff;
}

.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
}
.box__item {
  -webkit-box-flex: 0;
          flex: 0 0 33.33333%;
}

<div class="contain">
  <div class="list">
    <div class="list__content">
      <div class="box">
        <div class="box__item">1
          <div class="box__content">gar r afa swfasdfas asfas da asdf s asd a dg sdfg </div>
        </div>
        <div class="box__item">2
          <div class="box__content">asdfas asda da sdgasdg asd asgasdf asdf  asg dh dg</div>
        </div>
        <div class="box__item">3
          <div class="box__content">as das asdgasd fsadf asd asfasd asdf asda agaga asd</div>
        </div>
        <div class="box__item">4</div>
        <div class="box__item">5</div>
        <div class="box__item">6</div>
      </div>
      <div class="list__sidebar">sidebar</div>
    </div>
    <div class="list__row">row</div>
  </div>
</div>