# Containers: Flex vs Block, why does containers overlap?

**URL:** <https://community.appfarm.io/t/containers-flex-vs-block-why-does-containers-overlap/1376>\
**Category:** Ask the community\
**Created:** [September 5, 2024, 7:36am UTC](https://community.appfarm.io/t/containers-flex-vs-block-why-does-containers-overlap/1376 "2024-09-05T07:36:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![OleSorheim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/olesorheim/32/1171_2.png) [@OleSorheim](https://community.appfarm.io/u/OleSorheim)\
**Post date:** [September 5, 2024, 7:36am UTC](https://community.appfarm.io/t/containers-flex-vs-block-why-does-containers-overlap/1376/1 "2024-09-05T07:36:21Z")

</div>

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

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/3/33be48648ac8af33d075a5614689c01699b90b2e.png)  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/7/7ec7c3eddeccbacd96917cd5d05b9df6f9790c8f.png)

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/7/7250f125bc0e07486e719869381f50ff40284559.png)

---

<div class="post-metadata">

**Author:** ![isabelslorer](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/isabelslorer/32/856_2.png) [@isabelslorer](https://community.appfarm.io/u/isabelslorer)\
**Post date:** [September 6, 2024, 11:41am UTC](https://community.appfarm.io/t/containers-flex-vs-block-why-does-containers-overlap/1376/2 "2024-09-06T11:41:57Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/e/e653e07bb0061e4e00e202a9123d5ba8fa918911.png)