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

Question

尽管 box-sizing 被设置为 border-box，但我一直在努力弄清楚为什么我有一个 height:100% 的元素比它的容器大；

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

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

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%。

我确信这是一个简单的修复，但我已经尝试了几个小时都无济于事，所以非常感谢任何帮助！

编辑：我只是想让所有元素都适合各自的容器，而不会垂直重叠。我希望将 textarea 高度设置为 100% 会导致它填充其容器中剩余的 space。

谢谢

Answer 1

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

要解决这个问题，您可以给 input 一个固定的高度，例如 40px，然后在上面使用 height: calc( 100% - 60px) ;（减去 40px 高度加上 2 x 10px 的边距顶部和底部） article.

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

Answer 2

我没听懂你的问题。这是你想要的吗？？

Snapshot

如果是，那么这些是 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;
}

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

Contained element overflowing container despite box-sizing

html

css

border-box

box-sizing