Changing flex box width according to flex wrap
Ok so! I have a container holding elements, doesn't matter what kind. At the start and end (currently) there are brackets. Created using before/after pseudo elements. What I want is, whenever there is a wrap like seen on the image, the brackets still hold everything in between so like instead of
I want it to be
Without it being 2 brackets but 1 long bracket, I couldn't find a good ascii character for open brackets.
Here is a quick demo that pretty much shows the whole thing!
https://codepen.io/TcePrepK/pen/wvVXMXg?editors=1100
12 Replies
I couldn't find a proper solution to this but if it is going to use JavaScript, I am all for it. I just don't know how to "draw" those brackets then, I would also highly prefer to be able to keep the shadows as it is very neon like and I love it. Maybe SVG ? But that would still not work great with making extended brackets like that and I don't know if it is possible to apply shadow like this to SVGs. If possible maybe SVG that is generated through JS ? lol
if I'm understanding correctly what you want I'd start by making the pseudo elements use borders instead of the text characters. So the first one would have a top, bottom and left border but no right. Then set them to 100% height so they can grow with the wrapping. And absolute position them on the sides?
sorry was busy so seen very late! But it is a perfect idea. Only thing is... I can't seem to make before/after element's height 100% because the containter as itself doesn't have a fixed height. I don't really know how to fix that either 😅
but the moment I fix that, border idea should function perfectly
except... box shadow doesn't seem to work very well
try a
filter: drop-shadow(); insteadah! perfect
I didn't really change/fix the gaps etc
but it works
but here is the new cool issue, I the middle container that holds these is a flex box (same as the demo). What could be the solution to make its width smaller to fit ? I don't really have an easy way to put right bracket where it needs to be, right side of the
[Export Save]ok I updated the demo, my new question is this. How can I get rid of that empty space at right. Basically having with some amount (like
65% in the demo) but make it remove that useless space whenever needed. So max width is 65%, width is auto
doesn't work sadly
I've already tried that
maybe
display: inline-flex; instead of flex?well I can just test it in the playground (codepen.io) and it doesn't seem to work 😅
had time to test on my side aswell, but nope