62 replies

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:

align-items: center;
display: flex;
flex: 1; // the parent is also a flex item
flex-direction: column;
gap: $size-4;
justify-content: center;

align-items: center;
display: flex;
flex: 1; // the parent is also a flex item
flex-direction: column;
gap: $size-4;
justify-content: center;

align-items: center;
display: flex;
flex: 1; // the parent is also a flex item
flex-direction: column;
gap: $size-4;
justify-content: center;

align-items: center;
display: flex;
flex: 1; // the parent is also a flex item
flex-direction: column;
gap: $size-4;
justify-content: center;

Both child components are grid containers with grid items.
Thanks!

Screen_Shot_2024-06-10_at_9.10.19_AM.png

Match width sizing on flex containers?

Similar Threads

Similar Threads

Similar Threads