尽管有盒子大小，但包含的元素溢出容器

Question

我正在努力弄清楚为什么我有一个高度：100% 的元素，尽管盒子大小设置为边框框，但它比它的容器大;

我在这里做了一个小提琴：https://jsfiddle.net/a8v9a8ok/6/

我已经将元素设置为 100% 高度，并将框大小设置为边框框，但名为"left"的部分中包含的文章正在流过该部分，它包含的文本文本区域也流过。

html, body {
height: 100%;
width: 100%;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}

我不仅想隐藏溢出，我还希望元素保留在其容器中并将相应的容器填充到 100%。

我确信这是一个简单的解决方案，但我一直在尝试数小时无济于事，因此任何帮助将不胜感激！

编辑： 我只是试图让所有元素都适合它们各自的容器，而不会垂直重叠。 我希望将文本区域高度设置为 100% 应该会导致它填充其容器中的剩余空间。

谢谢

Answer 1

您的article元素有两个子元素：一个input元素和textarea，它有height: 100%。所以articles的高度加起来是 100% 加上输入元素的高度。这就是它溢出的原因。

要解决这个问题，您可以为input提供一个固定的高度，例如 40px，并在该article上使用height: calc( 100% - 60px) ;(减去 40px 高度加上 2 x 10px 的边距顶部和底部(。

https://jsfiddle.net/m08tsvzf/1/

Answer 2

我没有收到你的问题。 这是你想要的吗？？

快照

如果是，那么这些是CSS中的更改

main, section, article{
height: 100%;
width: 100%;
margin:5px;
}
textarea{
height:120%;
width:1000%;
max-height:100%;
max-width:100%;
}

textarea.resize-none {
resize: none; 
}
main{
background: yellow;
height:100%;
}
#left{
width: 100%;
background: blue;
height: 100%
}
#refresh{
margin-top: -30px;
float:left;
position :relative;
}