Vertical alignment of flexboxes via css-CodePudding

I have a weird use case where I need to have a first div (link) floating left over the whole height of the parent (orw). This height will change dynamically. The other siblings (orders) take the rest of horizontal space. The problem is they don't jump into the next row, I would need to have only one orders div per row.

<div >
<span >ss</span>
<div >sdddds<div >sss</div></div>
<div >sdddds<div >sss</div></div>
</div>

CSS

.orw {display: flex; width: 100%; height: 200px;  }
.link {display: flex; position: relative; float: left; background: #ccc; width: 100px; height: 100%; position: relative;align-items: center; justify-content: center;}
.orders {display: flex; position: relative; float: left; width: 100%; background: #f92; height: 100%; align-items: center; justify-content: center;}
.status {background: #ccc; display: flex; position: relative; width: 100px; float: right; height: 100%; align-items: center; justify-content: center;}

Any ideas on how to fix it?

https://jsfiddle.net/fsL2cbq3/3/

CodePudding user response：

Maybe you're looking for something like this: A mix of old style positioning layout for the split between the link area and the orders area, and flexbox for the internals of each.

.orw { position:relative; padding-left:100px;}
.orw * { display: flex; align-items: center; justify-content: center;}
.link { position:absolute; top:0; left:0; bottom:0; width:100px;}
.orders { background: #f92; display:flex; gap:10px;}
.status { background: #ccc; display:flex;}

<div >
<span >ss</span>
<div >sdddds<div >sss</div></div>
<div >sdddds<div >sss</div></div>
</div>