перелив без учета максимальной высоты и ширины

Question

Для следующего кода я пытаюсь сделать так, чтобы все, что не помещалось полностью внутри пурпурного квадрата (.body), оно переполнялось (с полосой прокрутки) и все равно создавало аккуратный макет.

Однако, когда я пытаюсь выбросить что-то действительно большое в это поле, оно просто переполняется (без полосы прокрутки) и портит дизайн. Как я могу решить это?

	* {
		box-sizing: border-box;
	}
	.grid-test {
		display: grid;
		grid-template-rows: 1fr 9fr;
		height: 100%;
		width: 100%;
		max-height: 100%;
		max-width: 100%;
	}

	.first {
		border: 10px solid blue;
	}
	.second {
		border: 10px solid red;
	}

	.wrapper {
		display: grid;
		grid-template-rows: 1fr 9fr;
		height: 100%;
		border: 10px solid orange;
		max-height: 100%;
		max-width: 100%;
	}
  .sub-header {
  	border: 10px solid lightblue;
	}
  .body {
    // background-color: magenta;
    border: 10px solid magenta;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
  }
  
  .canvas {
    //width: 2000px;
    //height: 1500px;
    background-color: purple;
    overflow: auto;
  }

	<div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
		<div class="grid-test">
			<div class="first">
			</div>
			<div
				class="second"
			>
				<div
					class="wrapper"
				>
					<div class="sub-header"></div>
					<div class="body">
						<div class="canvas"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

После помещения в него большого элемента

* {
		box-sizing: border-box;
	}
	.grid-test {
		display: grid;
		grid-template-rows: 1fr 9fr;
		height: 100%;
		width: 100%;
		max-height: 100%;
		max-width: 100%;
	}

	.first {
		border: 10px solid blue;
	}
	.second {
		border: 10px solid red;
	}

	.wrapper {
		display: grid;
		grid-template-rows: 1fr 9fr;
		height: 100%;
		border: 10px solid orange;
		max-height: 100%;
		max-width: 100%;
	}
  .sub-header {
  	border: 10px solid lightblue;
	}
  .body {
    // background-color: magenta;
    border: 10px solid magenta;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
  }
  
  .canvas {
    width: 2000px;
    height: 1500px;
    background-color: purple;
    overflow: auto;
  }

<div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
		<div class="grid-test">
			<div class="first">
			</div>
			<div
				class="second"
			>
				<div
					class="wrapper"
				>
					<div class="sub-header"></div>
					<div class="body">
						<div class="canvas"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

Answer 1

Я нашел другой ответ, хотя он не был связан с сеткой, он помог мне сделать то, что я хотел достичь

высота вложенной флексбокса против максимальной высоты