CODEWITHSUNDEEP
htmlcss
jq1080
jq1080

Reputation: 47

Vertical alignment of flexboxes via css

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 class="orw">
<span class="link">ss</span>
<div class="orders">sdddds<div class="status">sss</div></div>
<div class="orders">sdddds<div class="status">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/

Upvotes: 0

Views: 41

Answers (1)

Alohci
Alohci

Reputation: 82986

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 class="orw">
<span class="link">ss</span>
<div class="orders">sdddds<div class="status">sss</div></div>
<div class="orders">sdddds<div class="status">sss</div></div>
</div>

Upvotes: 2

Related Questions