Search code examples
javascriptreactjsflexboxchakra-uireact-loading-skeleton

Chakra UI's Skeleton Component not working under Flexbox properties

enter image description here

I have applied flex property to the Box component and inside it, there are two flex children, a circle skeleton, and a Box containing two skeletons.

But it shows only the circle Skeleton component:

enter image description here

And when I remove flex properties from the parent component Box, it previews like this :

enter image description here

After removing flex property from the parent component, at least it shows all components.

What is the reason behind it, not allowing flex properties on the parent Component whose children are the Skeleton Components?

There is no precaution written on the official docs inside the Skeleton section related to this behavior.

Anyone who knows?

Thanking you in advance. :)

Solution

  • No width was set on the Skeletons. You need to set width on the Skeleton/Inner Box or flex:1 on your inner Box.