在下面的示例中,内部元素的Object.keys(jsonData.forms[0].fields[0].instanceIds)
无效(JSFiddle example)。画布的父元素随之增长,滚动条变得可见。但是当我将overflow: hidden
移动到外部元素时,内部元素的行为就像它具有overflow: hidden
样式一样,通过保留外部元素的大小而不显示滚动条(JSFiddle example)。为什么overflow: hidden
在外部工作而不在内部工作?
overflow: hidden
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
}
.outer {
background-color: green;
}
.inner {
background-color: blue;
width: 100%;
height: 100%;
overflow: hidden;
}
.canvas {
width: 4000px;
height: 100px;
}