가변 열에 반응형 블록 배치
<p>머리글, 보드, 바닥글이 있는 게임 웹사이트가 있습니다. 뷰포트 안에 들어가려면 세 개가 모두 필요합니다. 이를 달성하려면 보드가 더 작아야 합니다. </p>
<p>제가 겪고 있는 문제는 축소입니다. 너비는 반응적으로 얻을 수 있었지만 높이는 제한적으로 얻을 수 없었습니다. </p>
<p>보드는 정사각형을 유지하고 사용하지 않는 공간을 차지하거나 줄어들어 넘침을 방지해야 합니다. </p>
<p>아래 내용에 따라 뭔가를 하고 있는데 보드가 부모의 키를 초과하게 되었습니다. </p>
<p>실제 코드에서는 줄 바꿈으로 인해 제목의 높이를 알 수 없습니다. 바닥글에는 다양한 양의 텍스트가 있습니다. 체스판 내부에는 행을 나타내는 일련의 div와 체스판의 사각형을 나타내는 일련의 하위 요소가 있습니다. 정사각형은 다음과 같은 종횡비를 갖습니다.</p>
<p>
<pre class="brush:css;toolbar:false;">.parent {
높이: 100vh;
배경색: 회색;
디스플레이: 플렉스;
플렉스 방향: 열;
}
.머리글 {
높이: 10px;
배경색: 파란색;
}
.어린이 {
배경색: 빨간색;
플렉스: 1 1 자동;
}
.체스보드 {
너비: 100%;
최대 높이: 100%;
종횡비: 1/1;
배경색: 보라색;
여백: 자동;
}
.바닥글 {
높이: 10px;
배경색: 녹색;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<div class="header">
</div>
<div class="child">
<div class="체스보드">
</div>
</div>
<div class="footer">
</div>
</p>
<p>도움을 주셔서 감사합니다. </p>
