다이내믹 콘텐츠를 갖춘 CSS 그리드 레이아웃 내의 Flexbox

다이내믹 콘텐츠를 갖춘 CSS 그리드 레이아웃 내의 Flexbox

동적 높이를 가진 셀이 있는 그리드 레이아웃이 있습니다(마우스 오버에 대한 정보 표시).컨텐츠의 크기에 따라 그리드가 행 높이를 확장하고 호버가 끝난 후 다시 축소하도록 합니다.각 셀에는 여러 항목이 있을 수 있으며 항목이 항상 셀을 완전히 채워야 합니다.

• 그리드의 템플릿 행 높이가 자동으로 설정됩니다.
• 셀 내부의 컨테이너는 플렉스박스를 사용하여 콘텐츠를 최대화합니다.

코드펜

.grid {
   display: grid;
   grid-template-columns: 150px 150px 150px 150px;
   grid-template-rows: auto auto auto;
   margin: 20px;
}

이 문제는 브라우저마다 다르게 보이지만 항상 같은 종류의 증상이 나타납니다.

• 호버링 후에는 행 높이가 다시 축소되지 않습니다.
• (예를 들어 chrome dev-tools에서) 셀의 스타일을 변경하면 레이아웃이 고정됩니다.(재레이아웃 발생)
• 상황에 따라 아이템/행은 호버할 때마다 더 커진다

적어도 Chrome 72와 Firefox 65.0.1에서는 정상적으로 동작하고 있는 것 같습니다.따라서 Safari가 마지막이지만 모바일에서는 매우 중요합니다**

내가 이미 시도했던 것

• 모든 force-reflow 트릭(JS + CSS)은 리플로만 트리거되지 않는다고 추측했기 때문에 찾을 수 있었습니다.
• 크기 조정 후에도 한 스타일이 강제로 해당 크기를 유지하는지 확인하기 위해 하위 스타일을 제거/추가
• 가 동작에 어떻게 영향을 미치는지 확인하기 위해 셀에서 요소를 제거/제거합니다.

처음에는 Safari에서 가장 큰 문제를 일으켰고 나는 그것이 아마도 그럴 것이라고 생각했다.

Safari는 아직 그리드 속성(https://caniuse.com/#grids=css-grid)과 같은 그리드 속성을 사용한 본질적 및 외적 사이징을 지원하지 않습니다.

그러나 이러한 문제는 Chrome에서는 발생하지 않아야 하며, 셀의 내용이 100% 높이가 아닐 경우 Safari에서도 정상적으로 확장됩니다.

현재 제 추측으로는 비교적 최근의 그리드 지원에서 브라우저 버그가 발생할 수 있습니다.그 때문에, 회피책을 제안해 주시면 감사하겠습니다.

Safari에서의 동작(잘못):

Chrome 동작(정답):

언급URL : https://stackoverflow.com/questions/54867839/flexbox-inside-css-grid-layout-with-dynamic-content