안녕하세요!
강의 잘 듣고 있습니다.
강의 내용 중에 궁금한 점이 하나 있어서 질문 드립니다.
검색창 만드는 부분에서 강의 내용에는 없고, 다운 받은 강의자료에는
<div style="color: #f2fffc; background-color: #273136; font-size: 18px; line-height: 24px; white-space: pre;">
<div>.search-form&nbsp;input[type='search']&nbsp;{</div>
<div>&nbsp;&nbsp;flex:&nbsp;1;</div>
<div>&nbsp;&nbsp;min-width:&nbsp;0;</div>
<div>&nbsp;&nbsp;margin-right:&nbsp;10px;</div>
<div>&nbsp;&nbsp;border:&nbsp;0;</div>
<div>&nbsp;&nbsp;border-radius:&nbsp;0.3em;</div>
<div>&nbsp;&nbsp;font-size:&nbsp;1rem;</div>
<div>}</div>
</div>
이렇게 min-width: 0이 있던데,
이 부분이 추가된 이유를 잘 모르겠습니다.

Flex 아이템에 shrink가 적용되더라도, 안에 있는 콘텐츠의 양에 따라 제대로 줄여지지 않는 경우가 있을 수 있는데요, 그럴 경우에 대비한 안전 장치로서 min-width: 0을 사용합니다.
지금 여기에서는 창의 크기를 극단적으로 작게 줄여보시면 티가 날거에요~ min-width: 0을 넣기 전에는 텍스트 인풋의 크기가 일정 크기 이하로 줄어들지 않는데, min-width: 0을 넣어주면 아주 작은 크기로도 유연하게 줄어드는 것을 확인하실 수 있을 거에요.
해당 내용도 추후에 업데이트 해야겠다는 생각이 드네요^^ 알려주셔서 감사합니다!

인프런 커뮤니티 질문&답변

min-width