Prevent flex items from overflowing a container

前端 未结 7 1790
说谎
说谎 2021-01-30 05:13

How do I make my flex item (article in this example), which has flex-grow: 1; not to overflow it\'s flex parent/container (main<

7条回答
  •  春和景丽
    2021-01-30 05:36

    max-width works for me.

    aside {
      flex: 0 1 200px;
      max-width: 200px;
    }
    

    Variables of CSS pre-processors allows to avoid hard-coding.

    aside {
      $WIDTH: 200px;
      flex: 0 1 $WIDTH;
      max-width: $WIDTH;
    }
    

    overflow: hidden also works, but I lately I try do not use it because it hides the elements as popups and dropdowns.

提交回复
热议问题