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

.contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}
.list {
  display: flex;
  flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
  &__content {
    flex: 1 1 auto;
    background: #e7eaef;
  }
  &__sidebar {
    flex: 0 1 23.07692%;
    min-width: 200px;
    background: #ccc;
  }
  &__row {
    flex: 0 0 100%;
    background: #fff;
  }
}
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  &__item {
    flex: 0 0 33.33333%;
  }
}