溢出:隐藏不在内部元素上工作?

时间:2018-01-18 01:04:51

标签: html css css3 css-grid

在下面的示例中,内部元素的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;
}

0 个答案:

没有答案