가변 열에 반응형 블록 배치

Question

머리글, 보드, 바닥글이 있는 게임 웹사이트가 있습니다. 뷰포트 안에 들어가려면 세 개가 모두 필요합니다. 이를 달성하려면 보드가 더 작아야 합니다.

제가 겪고 있는 문제는 축소입니다. 너비는 반응적으로 얻을 수 있었지만 높이는 제한적으로 얻을 수 없었습니다.

보드는 정사각형을 유지하고 사용하지 않는 공간을 차지하거나 줄어들어 넘침을 방지해야 합니다.

아래 내용에 따라 뭔가를 하고 있는데 보드가 부모의 키를 초과하게 되었습니다.

실제 코드에서는 줄 바꿈으로 인해 제목의 높이를 알 수 없습니다. 바닥글에는 다양한 양의 텍스트가 있습니다. 체스판 내부에는 행을 나타내는 일련의 div와 체스판의 사각형을 나타내는 일련의 하위 요소가 있습니다. 정사각형은 다음과 같은 종횡비를 갖습니다.

.parent {
  높이: 100vh;
  배경색: 회색;
  디스플레이: 플렉스;
  플렉스 방향: 열;
}

.머리글 {
  높이: 10px;
  배경색: 파란색;
}

.어린이 {
  배경색: 빨간색;
  플렉스: 1 1 자동;
}

.체스보드 {
  너비: 100%;
  최대 높이: 100%;
  종횡비: 1/1;
  배경색: 보라색;
  여백: 자동;
}

.바닥글 {
  높이: 10px;
  배경색: 녹색;
}

Answer 1

보드의 높이와 너비가 동일하도록 aspect-ratio 지시했기 때문에 너비가 3000px이면 높이는 동일해집니다. 선택하세요

1. 가로세로 비율 제거
2. 제 예에서는 하위 래퍼 요소를 제거합니다
3. 체스판의 최대 높이를 설정하세요

으아악 으아악

Answer 2

최종 답변은 귀하의 설명에 달려 있습니다. 이 질문에 대한 의견을 물었습니다. 그러나 나는 일반적인 대답을 할 것입니다.

아래 예에서 수행되는 작업을 간략하게 설명하겠습니다.
.chessboard-wrapper ，其中有一个 。 根据需要进行缩放，并具有 aspect-ratio: 1;을 만들었습니다.
.chessboard 本身具有 position:absolute; 그리고 아빠 사이즈로 나올 거예요.

으아악 으아악