[CSS] width: fit-content; 적용이 안되는 이슈 해결(feat:IOS)

이슈

width: fit-content; 를 통해 CSS를 작성했는데 PC에서는 이상이 없다가 IOS에서 확인을 하니 적용이 안되어 다르게 나타났다.

 

원인

크롬 46 이하 버전, 인터넷 익스플로러나 엣지, IOS에서 width:fit-content가 안될 수 있다고 한다.

 

해결

width:auto; 를 사용하여 조절하거나 (auto의 경우  display: inline-block;을 같이 사용해야한다.)

같은 역할을 하는 display:table; 를 사용하면 모든 버전에 적용된다.

 

https://stackoverflow.com/questions/49095440/width-fit-content-working-on-chrome-but-not-explorer/49095568

width: fit-content; working on Chrome but not explorer