Help: Specific layout with Grid/Flex that does not pop out under its max height

[bennettdams]

Hey!

I'm trying to do a specific layout together with React components.

Here is a CodeSandbox to try it out: https://codesandbox.io/s/eloquent-hopper-0nczm?file=/src/App.tsx

Imagine this page, done via grid (no scroll):

The green box is a legend which is filled with categories. Inside the categories there are buttons (blue boxes):
This shows how I want it to be:

Take category 2 as an example: As soon as the buttons fill the height of the green box, they should take the next "column" (where box no. 5 starts now).

In reality, they just fill up ONE column and therefore ignore the max height and just pop out under.

How to I make them wrap/take the next column of their available space?

These are components btw, so I don't want to hard-code the behavior of the categories/buttons.

Any help is appreciated!

[daniel-norris]

Why not set the overall 3 part layout of your app with grid. Then use flexbox to cover the the button functionality at the bottom.

You can then use flexbox wrap to achieve what you want (I think).

https://css-tricks.com/almanac/properties/f/flex-wrap/

[bennettdams]

Thanks for your input. If you have a look at the CodeSandbox you can see that I already use flex-wrap for that part, but exactly that is the problem: The boxes are not wrapping but rather taking more vertical space than they should.

[MartinHughes-BPC]

@bennettdams Hey Bennet,

I think I got this working:

In this bit remove the flex-1

const LegendButton = ({ no }: { no: number }) => {
  return (
    <div className="**flex-1** border-2 w-16 border-blue-300 text-xs">
      Button {no}
    </div>
  );
};

And here:

return (
    <div className="flex-1 p-4 border-4 border-orange-300 h-full">
      <p>{title}</p>
      <div className="flex flex-col flex-wrap **h-full**">{children}</div>
    </div>
  );

Add h-full

... and that should do the trick.

Cheers,
Martin.

[bennettdams]

That's perfect, thanks @MartinHughes-BPC! Could you post this as a new comment, so I can mark it as an answer?

[MartinHughes-BPC]

Will do!

[MartinHughes-BPC]

I think I got this working:

In this bit remove the flex-1

const LegendButton = ({ no }: { no: number }) => {
  return (
    <div className="**flex-1** border-2 w-16 border-blue-300 text-xs">
      Button {no}
    </div>
  );
};

And here:

return (
    <div className="flex-1 p-4 border-4 border-orange-300 h-full">
      <p>{title}</p>
      <div className="flex flex-col flex-wrap **h-full**">{children}</div>
    </div>
  );

Add h-full

... and that should do the trick.

Cheers,
Martin.