[UI] Safari에서 calc(%-px) 안되는 경우 (tailwind)

문제상황

"인증번호 받기" 버튼 클릭 후 "재전송", "확인" 버튼이 있는 input(InputWithButton 컴포넌트)의 width가 깨지는 현상이 발생

해결방법

기존 코드

 <div className="flex w-full gap-10pxr">
        <div className="w-[calc(100% - 7.125rem)]">
          <Input/>
        </div>
        <div className="w-114pxr">
          <SquareButton>
            {buttonText}
          </SquareButton>
        </div>
      </div>

safari에서 calc가 안되는 것 같아 수정이 필요했다.

수정한 코드

 <div className="flex w-full gap-10pxr">
        <div className="min-w-0 flex-1">
          <Input/>
        </div>
        <div className="w-114pxr flex-shrink-0">
          <SquareButton>
            {buttonText}
          </SquareButton>
        </div>
      </div>

"flex-1"로 채워주니 UI가 깨지지 않고 잘 나왔다!