Containers: Flex vs Block, why does containers overlap?

Hi

So I have a view where the containers overlap if the table in the container has data (see pictures) I can’t get rid of the overlap, no matter what settings I use for the containers. I have to have flex on the topmost container so I can centre everything. Any suggestions?

Also could someone explain why this happens so I better understand the display settings and how different settings on different containers interact?

See how the container overlap the buttons


Hi,

Flexbox aims to efficiently distribute space among items in a container. By default, flex items can both grow and shrink to fit the available space. To prevent a specific item from becoming too small and potentially overlapping others, try to set sizing: “no-shrink” on that item.

Skjermbilde 2024-09-06 kl. 13.24.07