• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

search-form input[type="search"] 내에 min-width

22.08.14 05:32 작성 조회수 212

0

안녕하세요.
Flex 반응형 페이지 Step 2 강의대로(6:41) search-form에 width를 240px 로 주니까 search-form이 화면 밖으로 튀어나가 가로 스크롤이 생기더라고요.
 
그래서 소스파일 올려주신 걸로 비교를 해보니 search-form의 search input에 min-width를 0으로 준게 빠져있길래 제 소스에 넣으니 잘 동작합니다. (유연한 검색창 강의에 해당 내용이 빠져있습니다.)
 
왜 min-width를 0을 줘야하는거고 왜 주지 않으면 저런 화면 밖으로 튀어나가는 현상이 발생할까요?

답변 1

답변을 작성해보세요.

0

아, 해당 부분 설명이 영상에서 빠져있군요! 텍스트 인풋 필드도 자체적으로 기본적인 최소 폭(min-width)를 갖고 있어서, 해당 엘리먼트를 감싸고 있는 부모 요소의 크기가 그것보다 작아지면 스크롤이 생길 수 있는데..
그것 때문에 인풋의 min-width를 강제로 0으로 세팅한 거라고 생각하시면 될 것 같습니다.