溢出不考虑最大高度和宽度答案

【问题标题】：overflow not respecting max height and width溢出不考虑最大高度和宽度
【发布时间】：2020-04-19 00:02:26
【问题描述】：

对于下面的代码，我试图使它不完全适合洋红色正方形 (.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>

【问题讨论】：

您能更准确地了解您正在寻找的行为吗？你说你想让内容溢出，然后你抱怨它溢出了。
@user984003 第二个应该产生一个滚动条，所以整体设计看起来仍然像第一个例子。您可以看到在第二个示例中缺少底部的边框（延伸到屏幕之外）。

标签： html css

【解决方案1】：

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

nested flexbox height vs max-height

【讨论】：