在父级溢出中隐藏div？
在父级溢出中隐藏div？
提问于 2018-05-13 00:02:12
我有一个带有overflow:hidden;的父容器，里面有块，我希望将其中的一些块“隐藏”在父容器的溢出中。
例如：
...| from here these are hidden off page
[ ] [ ] [ ] [ ] [ ]在上面，我只希望第一个块在屏幕上，其他的在隐藏的溢出中。
我试过使用：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
display: flex;
overflow: hidden
}
.child {
width: 100%;
}但孩子们只是聚在一起，待在屏幕上。
回答 2
Stack Overflow用户
发布于 2018-05-13 00:16:41
您需要设置父对象的宽度(可见宽度)，并在其内添加一个具有更大宽度(可见+隐藏宽度)的包装器，...try如下：
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
padding: 20px;
overflow-x: auto;
background: grey;
}
.container {
width: calc(3 * (200px - 20px));
height: 100%;
display: flex;
}
.child {
width: calc(200px - 2 * 20px);
margin-right: 20px;
height: 100%;
background: tomato;
}<div class="parent">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Stack Overflow用户
发布于 2018-05-13 00:12:16
容器不会溢出，除非它的尺寸有某种限制。请尝试设置max-height或max-width属性。
.parent
{
max-height: 30em; /* replace with the expected height of .child */
max-width: 30em; /* or max-width if you're trying to get horizontal overflow */
}另外，为什么要将.parent设置为具有display: flex？在没有其他设置的情况下，这只会导致它的所有子项并排显示，并分割水平空间。
如果您希望子项能够溢出，则删除它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50308179
复制相关文章
相似问题
腾讯云开发者
