Closed kotAPI closed 7 months ago
Reason for behaviour:
If adding align-items: center; to your flex container is causing the child div not to take up the full height, it may be due to the default behavior of align-items: center; in a flex container. This property aligns the items along the cross-axis (vertically in a column flex container) and can affect how the items are stretched.
To ensure that the child div takes up 100% of the height while still using align-items: center;, you can use the align-self property on the child element to override the alignment for that specific item.
We need to add height:"100%" property into css for default theme
There is also a gotcha that needs to be added into docs when used in conjunction with flex
This will work
This will not work
For it to work, the parent container needs to have an explicit height when items-center is used
This will work