Решил вопрос написав такой код:
.block {
display: inline-block;
height: 100px;
background: #8BC34A;
margin: 2px;
}
.parrent {
display: block;
position: relative;
width: 550px;
padding: 0 10px;
border: 2px solid red;
padding-bottom: 100px;
}
.child {
display: inline-flex;
width: auto;
/*transform: translateX(-394px);*/
}
<div class="parrent">
<div class="child">
<div class="item-1 block" style="width: 200px">1</div>
<div class="item-2 block" style="width: 120px">2</div>
<div class="item-3 block" style="width: 300px">3</div>
<div class="item-4 block" style="width: 70px">4</div>
<div class="item-5 block" style="width: 350px">6</div>
<div class="item-6 block" style="width: 200px">7</div>
</div>
</div>
Но display: inline-flex;
мне кажется не лучшее решение, не очень кроссбраузерно.
Может быть есть какой-то способ решить вопрос с помощью более старых стилей?