一个子div必须溢出，另一个不能
苏尼塔
这里的红色框是未设置任何溢出属性的父div。橙色和灰色框是其子级。我想知道的是，一个孩子是否有可能溢出另一个孩子？
.rootdiv {
width: 300px;
height: 300px;
background: red;
border: solid;
position: relative;
overflow: hidden;
}
.rootdiv .not-overflow {
border: dashed;
background: orange;
position: relative;
left: 20px;
}
.rootdiv .must-overflow {
border: dashed;
background: gray;
position: relative;
top: 20px;
left: 20px;
}<div class="rootdiv">
<div class="not-overflow">
This must get chopped.
</div>
<div class="must-overflow">
This must overflow.
</div>
</div> 史丹利
尽管这打破了一些提问规则，但这是一个很好的问题：
事实是，溢出是相对于其子级的，因此，如果您只想拥有一个父级，则是一个或另一个。
因此，仅使用一个包装器分区就无法实现此效果。但是，当您添加第三个时，它非常简单。看这个例子
.bigDiv {
background: red;
height: 50vh;
width: 50vw;
border: 5px solid black;
}
.bigDiv div div {
margin-top: 5vh;
width: 75vw;
border: 3px dashed black;
}
.divOne {
overflow: hidden;
}
.chop {
background: orange;
}
.overflow {
background: lightgray;
}<div class="bigDiv">
<div class="divOne">
<div class="chop">
<p>this must get chopped</p>
</div>
</div>
<div class="divTwo">
<div class="overflow">
<p>this must overflow</p>
</div>
</div>
</div>和结果 
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
从另一个子执行子
- 2
基于另一个子帧
- 3
从另一个子域访问Cookie
- 4
另一个子查询问题
- 5
防止DIV溢出另一个div？
- 6
如何防止div溢出另一个
- 7
另一个div中的html文本溢出
- 8
想要文本溢出到另一个 div
- 9
将两个结果在一个子传递到另一个子
- 10
使Div的子代在html中显示在另一个子视图的上方
- 11
从另一个访问一个子域
- 12
如何基于另一个zip的内容创建一个子zip？
- 13
在添加另一个子视图之前等待一个 addSubview 成功
- 14
尝试让一个子视图使用ui-router调用另一个子视图
- 15
单击另一个子菜单时如何关闭一个子菜单
- 16
在MATLAB中的另一个子图中绘制一个子图
- 17
将点击事件从一个子组件传递到另一个子组件
- 18
如何将一个子域重写为另一个子域？
- 19
如何从另一个子域发送一个子域的综合浏览量
- 20
VBA EXCEL：如何在另一个子例程中调用一个子例程？
- 21
如何知道另一个子组件中一个子组件的事件
- 22
将父div高度和另一个子div的高度扩展为更大的子div的高度
- 23
将父div高度和另一个子div的高度扩展为更大的子div的高度
- 24
将包含另一个子布局的子布局从一个占位符移动到另一个占位符
- 25
我不能在另一个旁边接一个div
- 26
matplotlib，在另一个子图的顶部放置一个透明的子图
- 27
Wireshark流量捕获-一个子网到另一个子网
- 28
在另一个子程序中定义一个子程序
- 29
在同一工作表VBA中调用另一个子
我来说两句