Match width sizing on flex containers?
I was wondering if anybody knew a neat way to grab the width of a flex-item container and apply it to a sibling flex container inside the same flex parent. I have a screenshot here showing a search component ("enter an address") and then below it a second component with a "browse" button. I was thinking there's got to be a simple way to make the browse button component as wide as the search input component. (Each component has the purple-gray background.) I am sure I could switch to grid or use a different flex solution, but I only want the browse component to match the width of the search input component, and for other siblings to flex the default way.
CSS/SCSS for reference, the parent has:
Both child components are grid containers with grid items.
Thanks!
35 Replies
display: gridOh guess I kinda half read that 😂
updated, still using grid <,<;;
thank you for the codepen b1mind, I always like your opinions
they're always good I mean
np not sure its the best solution for ya, just kinda lean on grid when I need things to fill.
this doesn't really help me unfortunately yea
I already have grid similarly set up on both the components, it'
hmm idk I guess it's a design wish, everything is where it needs to be and is responsive and all that, I just don't like that the bg shrinks on the lower button and I don't want to widen the button or, create content to make it the same width if that makes sense? I can always brute force the width with padding but I was hoping there was an answer to my question because it would be elegant idk
Guess I'm not quite sure what you are after, can you provide a codepen with more of a complete example?
I just went off* your screen shot
literally, can one locate(?) the width of a "flex-item A" and apply it to another "flex-item B". So flex-item A still shrinks to fit its content, but flex-item B then widens to match the width of flex-item A
no
You can give them both a basis or set their min-widths* though 🤔
this is good enough for me, I just wanted to know if it was possible
thanks : )
yea I'll just manually set their widths then
again I'd just use grid xD
oh maybe if I borrow SCSS variables from the top component and apply them to a width in the other, that might work
yea this is the rational choice, I just got a bug in my brain
not a fan xD
anytime I see flex direction too I question if it shouldn't just be grid 😉
yea I don't like that the button stretches
I thought you wanted that
just the parent? (.bg)
yea just the parent
this is my struggle, because it shrinks to the width of the button
updated grid solution 😉
I feel that I am pulling you down a road to madness and I don't want you to have to put more brainpower toward this 😛
na I enjoy it
Cause I look for patterns or situations when I would really want to use flex/grid
Yea the other reason I don't like using flex direction I come to realize is having the axis change
https://codepen.io/b1mind/pen/MWdEyKq
Having to justify with align feels so dirty 90% of the time 🤣
It make sense only if you are changing it for a media query imo (not to use it as default behavior)
In most those cases though I'm just going to use flex-wrap xD
I just like the shrink-behavior of flexbox in this case
Right but you get it it with more power in Grid in this case
if you look at the example I updated 😉
yes I looked at it, it's good!
we are on the same page about Grid, I am just hung up on this for some reason
haha yea not sure, for me its an obvious solution >.>;; use grid.
I'll probably wake up in the morning, look at this conversation again, look at your codepens again, and change it to grid lol
it's too late for me, I'm just gonna go make some svgs lol
If you’re using flex, don’t forget to harness the power of flex basis and flex-grow. Seems like you just want a flex-grow on the element holding the Browse button ?
this doesn't really help me with my issue as I am trying to mirror the size of its sibling element while still allowing its sibling element to naturally shrink around its content. Flex-basis/grow isn't going to help when I don't know what to set it to
You would set flex-grow:1 so it’s Browse element matches the size of its sibling even when the sibling shrinks. If you post a codepen with your current code I can show you an example.
Or just remove align items center from your browse element and it will stretch to the width you want by default depending on how you’ve structured your html
this is the only solution I am looking for
I am very good at flex and grid, and I can make the sizing happen, I just wanted to know if the way I mentioned was a possibility
there are other items in this flex box, as well. I'll probably just take the SCSS variable from my input width and make a div around the button that's the same width. It's hacky, but at least I'll get the responsive visual I want
taps the sign "Grid does this"
by setting the place-content: center; the children won't dense (like flex) but by default fill the max-content width of any of the children.
just saying again
Like for example if we make the heading the largest child, the .bg's are going to still fill to match
You can ofc put this as a child or max-width the full grid as well to give more control (not to mention assign template to it for more control), as missfox mentioned though without a example its really hard to understand how you have it structured.
If you’re going to just set its width anyway and you’re in a column you may as well remove flex or grid and just use utilize block width 100% on the element with the browse button. You’re fighting against flex instead of having it work for you with what its properties can do.
If you’re intent on setting and tracking a width, use JavaScript and event listeners and custom properties.