Css 当视图高度/宽度更改时，如何使子元素保持在父元素内？

这是一支密码笔。更改视图高度时，请注意紫色元素。它们溢出。我想一劳永逸地杀死这条龙——更重要的是——了解发生了什么，这样我就再也不用打扰你们了

---

好问题总是受欢迎的。毕竟，这是一个我们自愿花时间帮助他人的网站，所以只要进行有意义的知识交流，这绝对不是件麻烦的事

根据您希望实现的效果，将

溢出：隐藏

、

溢出：自动

或

溢出：滚动

属性添加到包含

的样式中。有关

溢出：

属性的更多信息，请参阅

---

overflow:

属性也有两个子类，特别是

overflow-x:

和

overflow-y:

，如果您选择，每个子类都可以有单独的值。

好的，正如我在代码中看到的，您正在使用flex buuut。。。不是真的

我更正了您的

columnright

，但如果您理解，您可以对

columnleft

执行相同的操作

您想要实现的是在列中具有相同“高度”的元素，并占据整个空间

下面是正确的CSS：

.columnright {
  background-color: #2ECC71;
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background-color: #9B59B6;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 20px;
}

.rowtwo {
  margin-bottom: 20px;
}

从rowone中删除所有内容

我使用的是

flex

属性，它定义元素将占用多少空间。在这里，每个元素必须占用1个单位的空间，因此每个元素的高度相同。我还为每个元素添加了一个边距顶部，以创建一个“内部”填充，并为最后一个元素添加了一个边距底部

---

另外，这里是正确的代码笔：

好的，让我们举个例子。您有一个名为

columnright

的元素。里面有

第一排

和

第二排

行

的渲染高度和边距如下：

height: 40%;
margin-top: 5%;
margin-bottom: 5%;

height: 40%;
margin-bottom: 5%;

第二行

的渲染高度和边距如下：

height: 40%;
margin-top: 5%;
margin-bottom: 5%;

height: 40%;
margin-bottom: 5%;

所以

40%+5%+5%+40%+5%=95%

，对吗？应该不会溢出来吧实际上不是

问题：

如下列文件所述：

[margin]百分比是根据生成的框的包含块的宽度计算的。请注意，“页边距顶部”和“页边距底部”也是如此。如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义

因此，当您设置“上/下页边距”时，它是相对于宽度的，而不是相对于高度的。如果您的元素是矩形（在本例中是您的），它将在某个点溢出，因为

宽度

高于

高度

你能做些什么：

---

如果父元素有定义的高度，最好不要使用百分比边距。除此之外，如果符合您的需要，您可以从父项中删除

高度

我从来不知道百分比是基于父项宽度而不是高度计算的。谢谢谢谢你的回答。我知道溢出属性，但我希望元素能够响应并改变大小。应该说得更清楚。