(CSS) Beginner question about Flex cell width control

[Under S.]

Previous thread got locked, so I'll ask my follow-up here.

I've been using Grid for quite some time, was told I'd be better off with Flex, and started fiddling with it to see how quickly I can pick it up. Could someone tell me why the following code isn't displaying both cells as equal width unless there's enough content to fill them?

.flex {
display: flex;
width: 100%;
gap: 1.5em;
flex-direction: row
}
.flex .cell {
flex-grow: 1
}

<div class="flex">
    <div class="cell">
        Hi
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

I'm trying to keep them each at 50% regardless of content, and couldn't find an equivalent to grid-template-columns: 50% 50%. Thought maybe flex-grow: 1 would do it, but that seems to require that both cells have enough content to fill.

(Currently, the single-word cell is only as wide as that word, with the fuller one occupying everything else.)

Could someone correct my primitive n00b syntax to force each of the 2 cells to specific percentages regardless of contents, like grid-template-columns lets us do?

Thanks in advance!

[osgood_]

Just use percentages for widths when youre constructing your equal width columns in Flexbox. You could also use flex-basis to set the column width (see code below). Flex doesnt really play that nicely with gap like Grid does as it tends to add the gap to the right of each container if you set the gap using px, whereas Grid just adds the space between columns, assuming you set the column widths using the grid fr (fraction) unit. You can of course use css calc to overcome the gap issues in Flexbox if you do require the gap to remain at a static px width - you would set the column width as width: calc(50%-15px); lf I use Flex then I use justify-content: space-between; and set the column width to 48% or 49% which creates a gap between the columns.

I only use flex: 1; (the short version of flex-grow: 1; ) if I want a column or row to consume the remaining space. Example I might set the 1st column to 30% or in some cases give it a specific width of 400px - I can then set flex: 1; on the 2nd column to force it to take up the rest of its parent container space. flex: 1; is useful at times, particularly when you want buttons to line up at the foot of each column, other than that I dont find much use for it but Im sure it has other possibilties, maybe.

You may find the below link useful, its a visual guide about Flexbox properties:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

FLEXBOX:

.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex .cell {
width: 48%;
/ * flex-basis: 48%; You can also use this instead of width */
background-color: #f2f2f2;
}
@media screen and (max-width: 761px) {
.flex .cell {
width: 100%;
/* flex-basis: 100%; You can also use this instead of width */
}
}

GRID:

.flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.flex .cell {
background-color: #f2f2f2;
}
@media screen and (max-width: 761px) {
.flex {
grid-template-columns: 1fr;
}
}

[BenPleysier]

This is what I would use:

.flex {
    display: flex;
    justify-content: space-between;
}

.flex .cell {
    flex-basis: calc(50% - 1.5em); /* width minus gap */
}

A few remarks:

.flex {

display: flex;
width: 100%; = default
gap: 1.5em;
flex-direction: row  = default
}
.flex .cell {
flex-grow: 1 = takes up all available space
}

[BenPleysier]

This is a good reference for Flexbox:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

[Liam Dilley]

There are a few mistakes in the comments with regards to Flex.
Firstly - Everyone should start moving away from percentage widths. Still used, still useful for sure but when you what proper scaling and dynmaic scaling there are more options.
Viewport width and height - vw, vh
Rem - Root EM. This is where in html you have a font size you can have direct scaling of elements based on that value.
Calc is used in an example here and this is a great way to also do values based on the conditions of the display.

In terms of flex spacing, just as CSS Grid you do not do this with margin, you use the gap value.

 gap: 0.5em;

For example.

With regard to Grid you can avoid using media quries. Again you have values to define the current browser conditions now to manage this sort of thing.
You can repeat your column rules and you can also define the content specifc values (if you want) that it conforms too.

grid-template-columns: repeat(3, fit-content(410px));

But one of the cool newer toys with have in our CSS arsenal is minmax.
You can do columns like this now for example:

grid-template-columns: minmax(0, 300px) 1fr;

And the grid gap syntax is prefered now to be:

grid-gap: 20px;

So it is not confused with the gap of flexbox.

The last thing I would add is that the justify-content spacing you have to be mindful as people use it a lot but then it does not fit varied content at different times etc. Here you want to observe using of the flex-basis.
You can ensure a content fit for example with:

flex-basis: fit-content;

[BenPleysier]

So, to translate what you are saying

.row {
    display: flex;
    gap: 1.5rem;
}

.col {
    flex: 1;
    background: yellow;
    padding: 1rem;
}

This is a huge improvement, thank you!

[Liam Dilley]

I been posting for a long time and mainly for the other platforms Adobe had. My thing is I do not just spit out the code answers. I try to provide all the right information and tools needed for the understanding for the code. I know this annoys some people but I wont change my view on that. People who turn to language models to get their code now for example wont learn what it is doing or how to fix it if something is not right or expand on it. The educated will.

I am glad though you have taken that and got a nice clean CSS output.

flex: 1;

Is the only bit you will need to re-visit for responsiveness if you need to.

[osgood_]

My thing is I do not just spit out the code answers. I try to provide all the right information and tools needed for the understanding for the code. I know this annoys some people but I wont change my view on that. 

By @Liam Dilley

I don't think that annoys anyone,  or shouldn't do. I usually try to provide some detailed information in a lot of cases when l supply code snippets here so at least it provides some useful information for those that might appreciate it.

You have to remember that most who come to this forum are 'drive throughs', they come for specific quick solutions not explanations of how those solutions work but that shouldn't stop you doing your 'job' professionally by elaborating on your views of what to use and why. 

Of course in the professional world its a different approach or should be but lm skeptical given all the abundance of frameworks, libraries and AI options. That can only have a detrimental effect on ones ability to fully understand anything if you put too much dependency on that kind of workflow, in my opinion.

[osgood_]

---

@Liam Dilley wrote:

There are a few mistakes in the comments with regards to Flex.
Firstly - Everyone should start moving away from percentage widths.

Mistakes, thats your own personal opinion, which is completely different.  Vw and vh come with their own issues which need to be resolved before l would advise everyone should move to that specification. Even the Mozilla docs recommend percentage when using flex basis amongst other measurements, strangely they don't yet include vw and vh.

Em is a good idea to set the gap width when using flex, percentage works equally as well assuming you want the gap between columns to grow as the browser viewport is narrowed and widened but l wouldn't use it to scale other elements as its more complex and the results are not always desirable. Yes it's a cheap and cheerful way but using px will give you ultimate control over sizing, if you can be bothered. Many can't and resort to scaling.

I've never personally encountered problems with using justify- content - do you have an example under which conditions this could be a problem, so l can make note. I'm sure there must be as you have obviously encountered such issues yourself. There are many issues lurking out there, l frequently come across strange happenings even after years of coding, which lve never previously run into.

[Liam Dilley]

There is nothing wrong with justify-content but it is the context with regard to - again fluid content.
If your grid is always 20 items for example there is nothing wrong with it. But if it is a dynamic content, say a favourites list and you only have 1. Just doing a CSS grid with FR and Justify can lead to that nice box filling the space and not looking great.
Flex had flaws and why CSS Grid existed. Then the comitte went back and updated Flex a bit more. CSS Grid is still what I would call "In flux" as its not perfect and there has been many things out for it. I love CSS grid but the issue is there are too many attributes and variables to use now lol. I do not blame anyone not using the best option, it's confusing. I use firefox for many reasons but it has the grid control support to generate the right CSS and I use that because of all the options and dificullty using the right things.

Some Mozilla docs are REM, VW and VH. it depends on when they were written or who revists.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex Does have the info for the content specific features which I do recomend everyone try to use to help with their content flow.

Using margin on a grid or flex may have an output but it is wrong. When scaling and resize etc that is not the correct spacing and will require further CSS to overcome.
But I would not hire anyone who thinks "It works" or "Mostly works" is acceptable.

[osgood_]

I don't really have anything to add apart from l think it's become 'this is how l would approach it' rather than 'this is how you should approach it' Even some of what l call the better youtube developer channels are making that kind of disclaimer because they are getting flack in the comments about the choices they make when coding. The problem arises because there are too many variations and options available which provide the same end result, making it almost impossible to clarify what's the right approach and what is the wrong approach.