flex 설정시 아이폰 카카오톡 링크 오픈 창에서 생기는 issue

멋쟁이사자처럼 프론트엔드 수업 중 과제 하나가 바로 '벤딩머신' 만들기였다.

이때는 아직 자바스크립트 진도를 나가기 전이라 우선 HTML/CSS만으로 구현했는데 크롬 브라우저, 삼성 갤럭시폰(내폰), 사파리에서는 아래와 같이 출력이 제대로 되었는데, 남자친구 폰(아이폰)으로 카카오톡 링크를 보내고 확인해보니 각각의 <li> 태그로 구성되어 있는 콜라 버튼들이 아래로 내려가는 현상을 발견했다.

 

 

내 폰(galaxy note 10)에서는 정상적으로 구현된다.

 

 

아이폰에서 카카오톡 링크로 화면을 열었을 때 레이아웃이 이렇게 깨진다...사파리 앱에서 열었을때는 정상 구현됨.

 

아이폰 사파리앱에서는 정상적으로 구현되는 걸 보면, 아이폰 기기 자체 문제가 아니라 카카오톡 링크 문제인 것 같았다.

확인해보니 flex 속성을 주었을 때, width가 1px 줄어드는 문제가 있었다.

 

<li> 안에 있는 <button>태그 넓이를 width: 94px로 값을 주었기 때문에 생기는 문제로 보인다.

이를 해결하기 위해 <button>넓이가 아닌 <li> 넓이를 flex-basis: 94px로 설정해 주었고..

 

결과는 성공! 문제해결!