Streaming live at 10am (PST)

Flex box help to shrink columns to allow for text


#1

I am trying to build a flexbox so that the column widths of the flex items will scale to fit the links if one of the columns ends up wrapping to two columns of links. Is that possible?

In my example I have 3 columns of links, the 3rd one has wrapped to two columns of links, what I would like is for the first two columns to get narrower to allow the third column to contain two wrapped columns of links.

Any help from flexbox experts would be apprecated!


#2

Hello @johnsherwin

The issue is that you’ve added a fixed height and width to your overall container, that’s why your flexbox element can’t grow.


#3

Hi Aaron, I am not sure that is what I am looking for, ideally I want the overall flexbox container to stay the same size and the columns within it (which don’t have fixed widths to get narrower to accommodate the text. All of the text in there should fit if the first two columns get narrower and allow the third to grow?


#4

Do you have a screenshot or an example of what you’re trying to achieve?


#5

Hi Aaron,

Trying to see if I can get this:

So col 1 and 2 have shrunk to accommodate col 3 wrapping two internal columns of text.

Ideally the 3 cols would re-size to accommodate these variables in any column, in other words in another instance the second or first column may have more text and need two internal rows.