Html 防止弹性物品溢出容器

我正在尝试创建一个具有多个项目的响应性首页网站

这就是我想要的（屏幕上是黑色的方块）：

这就是我所拥有的（它代表了我想要做的事情）：

#主{
背景颜色：紫色；
溢出：隐藏；
排名：0；
位置：绝对位置；
底部：0；
右：0；
左：0；
}
.集装箱{
边缘顶部：10px；
浮动：左；
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：中心；
身高：100%；
调整项目：灵活启动；
溢出：滚动；
}
.项目1{
背景色：红色；
右边距：20px；
宽度：100px；
高度：100px；
}
.项目2{
背景颜色：蓝色；
宽度：100px；
高度：自动；
右边距：20px；
颜色：白色；
}
.项目3{
背景颜色：绿色；
最小宽度：100px；
最大宽度：200px；
身高：100%；
边缘底部：20px；
溢出：隐藏；
}
.内容{
最小高度：400px；
溢出：滚动；
}

嘿
项目项目项目
这是第一段

这是第2段

这是第三段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

这是第9段

这是第10段

这是第11段

这是第12段

这是第13段

这是第14段

这是第15段

这是第16段

这是第17段

这是第18段

这是第19段

这是第20段

这是第21段

这是第22段

这是第23段

这是第24段

这是第25段

这是第26段

这是第27段

这是第28段

这是第29段

这是第30段

这是第31段

这是第32段

这是第33段

这是第34段

主要问题是您的第三个（绿色）项目设置为

高度：100%

。这意味着它将占据容器的整个高度

除了你还有一个边距集

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: 100%; 
  margin-bottom: 20px;
  overflow: hidden;
}

您还有一个

h2

占据高度

因此，

height:100%

+

margin-bottom:20px

+

h2

大于100%，并导致溢出

请尝试以下方法：

.item3 {
  background-color: green;
  min-width: 100px; 
  max-width: 200px;
  height: calc(100% - 40px); 
  margin-bottom: 20px;
  overflow: hidden;
}

这将解决主要问题

然后，要使滚动条正常工作，请调整

溢出

规则，并将

display:flex

添加到

.item3

。这将触发子元素上的全高，足以呈现滚动条

#主{
背景颜色：紫色；
溢出：隐藏；
排名：0；
位置：绝对位置；
底部：0；
右：0；
左：0；
}
.集装箱{
边缘顶部：10px；
浮动：左；
填充：0；
保证金：0；
显示器：flex；
柔性流：行换行；
证明内容：中心；
身高：100%；
调整项目：灵活启动；
/*溢出：滚动*/
}
.项目1{
背景色：红色；
右边距：20px；
宽度：100px；
高度：100px；
}
.项目2{
背景颜色：蓝色；
宽度：100px；
高度：自动；
右边距：20px；
颜色：白色；
}
.项目3{
背景颜色：绿色；
最小宽度：100px；
最大宽度：200px；
高度：计算（100%-40px）；
边缘底部：20px；
溢出：隐藏；
显示器：flex；
}
.内容{
最小高度：0；
溢出y：滚动；
}
h2{高度：20px；边距：0；}

嘿
项目项目项目
这是第一段

这是第2段

这是第三段

这是第4段

这是第5段

这是第6段

这是第7段

这是第8段

这是第9段

这是第10段

这是第11段

这是第12段

这是第13段

这是第14段

这是第15段

这是第16段

这是第17段

这是第18段

这是第19段

这是第20段

这是第21段

这是第22段

这是第23段

这是第24段

这是第25段

这是第26段

这是第27段

这是第28段

这是第29段

这是第30段

这是第31段

这是第32段

这是第33段

这是第34段

在较宽的屏幕上，蓝色框应该在中间，绿色框在右边，或者所有三个框都与左边对齐，在它们之间有一个边距？@ CJL750在正常屏幕中，项目位置是正确的，我只想在我的绿色列表的底部有一个“边距”，并在其上设置一个滚动条。对于您的问题，它是：“所有三个框都向左对齐，并且在它们之间留有一个边距”这是否有效，或者您是否也尝试将浮动转换为仅使用flex属性@cjl750很好，但是，当它不是“一行页面”时，我不希望在我的主目录上有滚动条