flex 컨테이너 안 input 오버플로우 해결

🤖 756 in / 635 out / 1391 total tokens

퀵 식사 금액 입력 팝업에서 number input이 부모 영역을 뚫고 나가던 문제를 수정했다. 팝업 width가 300px로 고정되어 있는데 입력창이 그걸 무시하고 삐져나와서 보기 안 좋았다.

원인은 flex 자식의 기본 min-width: auto 동작 때문이었다. flex 아이템은 content 크기만큼 강제로 확보하려고 해서, 입력창 내용이 길어지면 부모를 무시하고 늘어난다. .meal-popup-input에 min-width: 0을 주고, wrap에는 overflow: hidden을 추가해서 해결했다. 덤로 number input의 스피너 화살표도 숨겼다.

.meal-popup-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  overflow: hidden; /* 추가 */
}
 
.meal-popup-input {
  flex: 1;
  min-width: 0; /* 핵심 수정 */
  padding: 12px 14px;
}
 
/* 스피너 숨김 */
.meal-popup-input::-webkit-spin-button,
.meal-popup-input::-moz-appearance: textfield {
  -moz-appearance: textfield;
  appearance: textfield;
}

flex 레이아웃 쓸 때 min-width: 0 생각하자. 또 까먹었다.

CSS flex overflow 버그수정