플렉스 박스가 Safari에서 제대로 상자를 정렬하지 않습니다.

Question

flex을 사용하여 2 열 레이아웃을 만들려고합니다. Here's a codepen 현재 갖고있는 것을 보여줍니다. Chrome 및 Firefox에서 원하는대로 작동합니다. 그러나 Safari에서 각 div은 전체 창 전체를 채우기 위해 확장되고 두 번째는 다른 하나 위에 겹치기 때문에 줄 바꿈됩니다. 둘이 서로 옆에 있기를 바란다.

TL; DR : Code/demo are here. Chrome, Firefox에서 작동합니다. Safari에서 작동하지 않습니다.

Answer 1

좋아, 해결했습니다. 문제는 Safari가 작동하려면 해당 업체 고유의 접두사가 필요하다는 것입니다. 따라서 flexbox에 display: -webkit-flex;을 추가하고 div 각각에 -webkit-flex: auto;을 추가하면 의도 한대로 작동합니다. Dontcha는 CSS 브라우저 지원을 좋아합니까?

여기에 working codepen이 있습니다.