Resize block after text wrap
I want to create pricing list like on image. I use flex container on each line, inside are two text blocks and hr between them.
If name text is too long, it takes whole space and wraps to next line.
Problem: its block keeps whole width, which makes hr disappear.
Alternatively I tried
which makes hr take all available space, but forcefully wraps name to longest word.
And making
prevents name from ever wrapping when needed.
How can I solve it? Flexbox is not required if there are other ways to do it.
Main condition is to take full width, stretch hr, keep small space between text and hr, align all items at bottom when wrapping
14 Replies
Better picture of final result
You could put a
<div> in the middle with a flex-grow to fill the space and a border-bottom of dotted?Turn flex grow off on the word you want to be it's intrinsic size. Flex: 1 0 auto turns off flex shrink so it won't shrink eg won't wrap
There already is hr for that
But I still need to wrap when it is too long to fit into one line
Yes that’s why you need flex shrink on . You turned flex shrink of with flex: 1 0 auto
Just comment out the flex declaration or set it to revert and see if that’s the behaviour you’re looking for
Tried 0 1 auto and tried revert, they both give same result as initial problem has
Can you make a codepen please
https://codepen.io/Arctomachine/pen/dPbLjMB here. Resize it until text wraps, line disappears after that
No idea why it centers line vertically, but it is not important here.
Try to give the hr a flex-shrink 0
I’m on mobile but will look at this on desktop in a few hours if no one else has popped in first
You may want to approach this with grid tbh
Could also give the hr a min width:3ch; and nuke the margin so it aligns to the bottom.
Shrink 0 same result
Dynamic flex base? Looks cool. Still leaves some gaps when text wraps by half, but that should work
That's because if you out bgs on e rrythibg the box thst holds the text is taking up thst space, it's not an upside down L where the hr can impeded into that space , it would have to be pulled out of the flow to overlap unto the text box space
Upside down
ELLLL. HR starts here
Not
Upside down
ELLL. HR cannot impede