溢出不遵守最大高度和宽度

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

我找到了另一个答案，尽管它与网格无关，但是它帮助我完成了我想实现的目标

nested flexbox height vs max-height