Не пойму почему так работает. Блок вроде как должен сжиматься и он сжимается. Но как только появляется контент в блоке, то сайдбар улетает вниз.
Ниже пример если убрать текст в box__content, то работает нормально, если появляется текст то ломается.
.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 {
-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>
<div class="list__sidebar">sidebar</div>
<div class="list__row">row</div>
</div>
</div>