min-content / max-content

@media (max-width: 768px) {

  .banner__contents {

    width: min-content !important;

    padding-left: 2.3rem;

    margin-left: 0px !important;

  }

 

 

: 요소안에 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때 사용 

 

min-content : 

- 콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다.

 - 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다.

 

max-content: 

- 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다.

 - 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로

   수평 방향의 컨텐츠인 텍스트인 경우 줄 바꿈 되지 않고 쭉 뻗은 길이이다.

 

 

auto가 원래 길이

min : 단어가 제일 긴 where 기준으로 요소의 넓이 지정

max : 문장의 전체 크기 만큼 요소 넓이 지정