flex-wrap이 body를 넘어가는 경우!!

아 ㅡㅡ

• 배경을 모든 화면에 채우기 위해 배경을 body의 높이 전체로 지정하고 화면을 줄였을 때
  자식 요소중 flex box에서 flex-wrap을 사용하고 flex-box의 자식이 flex-shrink: 0인 경우에
  body 밖으로 튀어나가서 배경화면 밖 하얀 화면으로 삐져나가는 경우가 있다!
• 아래처럼 모든 화면이 검은색으로 보이게 하고 싶지만 갑자기 flex 요소들이 화면 body 밖으로 튀어나가는 경우가 있다!!!

• 이런 경우에 body에 overflow: auto 옵션을 주면 해결 가능하다!!!
• 이거 모르고 개삽질함 ;

 

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: black;
}

body{
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

 

.boardlist-main-card {
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}

.boardlist-main-card > .card {
    width: 300px;
    margin: 20px 20px;
    flex-shrink: 0;
}