오버플로 시 그리드 열 크기 조정 지연

Question

고정 위치 지정을 사용하여 브라우저 뷰포트를 채우는 2×2 CSS 그리드가 있습니다. 다음과 같습니다:

으아악

맨 위 행과 왼쪽 열은 각각 내용에 맞고 크기가 auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr입니다.

북동쪽과 남서쪽 셀(이미지에서 X로 채워져 있음)은 모두 스크롤 가능한 Flex 상위 셀입니다. 여기에는 원하는 수의 하위 요소가 포함되며 해당 숫자는 동적으로 변경될 수 있습니다. 각 속성에 overflow 属性设置为 auto를 추가하고 다음 규칙 세트를 사용하여 스크롤 막대의 스타일을 지정합니다.

으아악

macOS의 Chrome에서 페이지를 로드하면 스크롤바가 남서쪽 셀의 내용을 오버레이합니다. 그런 다음 브라우저 창의 크기를 조정하면 왼쪽 열이 스크롤 막대(이미 오버레이로 표시됨)를 수용하도록 확장되고 콘텐츠 오른쪽으로 이동합니다.

스크롤바가 콘텐츠를 전혀 덮지 않기를 원하며 관련 없는 크기 조정 이벤트에서 레이아웃 이동을 제거하고 싶습니다. 내가 어떻게 이러한 목표를 달성할 수 있는지 아시나요?

이 코드펜은 최소한의 재현이 가능한 예제입니다. 그러나 그것은 나에게 일관성이 없어 보입니다. 페이지를 다시 로드할 때 스크롤 막대가 가려지는 경우도 있고, 스크롤 막대가 콘텐츠 오른쪽에 표시될 만큼 열이 넓어지는 경우도 있습니다. 이 독립형 페이지에서는 잘못된 적용 범위와 크기 조정이 더 일관성이 있는 것으로 보입니다.

Answer 1

이를 방지하려면 그리드의 크기를 업데이트하고 스크롤 막대를 고려해야 합니다. 또 다른 질문은 CSS만 사용하여 이를 수행하는 방법입니다. 나는 그것을 grid-template-columns 应用 animation라고 생각했는데 작동하는 것 같습니다:

으아악 으아악

---

JavaScript로 하고 싶다면:

으아악 으아악 으아악