Question

我有一个overflow:hidden;的父母持有人，我有内容，我希望＆＃34;隐藏＆＃34;其中一些在父母的溢出中。

例如：

...| 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%;
}

但孩子们只是聚在一起并留在屏幕上。

Answer 1

您需要为父级设置一个宽度（可见宽度），并在其中添加一个更大宽度（可见+隐藏宽度）的包装器...试试这个：

＆＃13;

* {
  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;
}

＆＃13;

<div class="parent">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

＆＃13;

Answer 2

除非尺寸有某种限制，否则容器不会溢出。尝试设置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？没有其他设置，这将导致其所有子项并排显示并划分水平空间。

如果您希望孩子能够溢出，请将其删除。

在父母的溢出中隐藏div？

2 个答案: