flex·grid 안의 input과 긴 텍스트에는 min-width: 0을 준다

모바일에서 input이 들어간 카드가 화면 밖으로 삐져나가 페이지 전체가 가로로 스크롤된다. 데스크톱에서는 멀쩡하다.

flex·grid 항목의 min-width 기본값은 0이 아니라 auto다. auto는 「내용의 최소 크기보다 작아지지 않는다」는 뜻이라, 부모가 좁아져도 항목이 줄어들지 못한다. <input>의 내용 최소 크기는 size 속성의 기본값(약 20자) 폭이고, 긴 단어나 URL도 마찬가지로 버틴다.

줄어들어야 하는 항목에 min-width: 0을 준다. input을 감싼 flex 항목이 또 flex 항목 안에 있다면 바깥 항목에도 준다. 하나라도 빠지면 그 층에서 버틴다.

.row {
  display: flex;
  gap: 8px;
}
.row > .field {
  flex: 1;
  min-width: 0; /* 내용보다 작게 줄어들 수 있게 */
}
.row input {
  width: 100%;
  min-width: 0;
}
.title {
  min-width: 0;
  overflow-wrap: anywhere; /* 긴 URL·단어 */
}

어느 요소가 넘치는지 모르겠으면 콘솔에서 찾는다.

[...document.querySelectorAll('*')].filter((e) => e.scrollWidth > innerWidth);