내부 격자가 수행 할 때 Chrome이 외부 격자를 확장하지 않는 이유

Question

대문자 G 격자 스타일로 만든 중첩 격자 배치가 있습니다. 중첩 된 격자에는 100 % 너비로 설정된 이미지가 있으며 높이가 비례 적으로 증가하고 부모 모눈이 수직으로 확장됩니다. 그러나 Chrome에서는 그랜드 부모 그리드가 커지지 않습니다.

는 여기 상황을 조롱했습니다 https://codepen.io/anon/pen/vpEVZj?editors=1100

먼저 .single-grid 표시 미세하지만 두 번째 .outer-grid하지 않나요.

Chrome에서 버그가 있습니까? 아니면 누락 되었습니까?

편집 : 오늘은 데모 또는 내 응용 프로그램이이 문제를 보여주지 않습니다. 어쩌면 그것은 단지 귀찮은 문제 일 것입니다.

Answer 1

확실하지 이유가 무엇인지,하지만 당신은 grid-template-columns: auto1fr에 변경하여 크롬에서 예상되는 동작을 얻을 수 있습니다 :

.outer-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    /* ... */ 
}