All comments

• 

  ptrwilk•420

  @ptrwilkSubmitted over 1 year ago

  If you switch into mobile view you might notice that first child element(orange) goes outside top edge of the window. Can you suggest how to prevent such behaviour ?

  

  3-column preview card component - React TS, MUI

  1

  40
  

  crummycat•40

  @crummycatPosted over 1 year ago

  When you set align-items: center on a container element, it centers the child elements vertically within the container. However, if the child element's height is larger than the container, the content will be cut off.

  To prevent this, you can add margin-top: auto and margin-bottom: auto to the child element.

  So for you, you will need to add margin-top: auto; and margin-bottom: auto; to .styles_container__ELhyB which is the child element of .app which has align-items: center;.

  Stackoverflow answer to similiar problem

  I hope that helps.

  Marked as helpful

  1

  This comment has received 1 replyShow