Question

我在一个固定的父div内有5个子div，其高度根据设备而异。我正在寻找任何黑客来隐藏整个div，如果它不能适合固定的父div。

我尝试过“溢出：隐藏；”但它只会裁剪出溢出的部分，而不是整个div

.fixed-div {
            background: greenyellow;
            height: calc(100vh - 10px);
            width: 100px;
            position: fixed;
            overflow: hidden;
        }

        .child-div {
            width: 60px;
            height: 60px;
            background: red;
            margin: 20px auto;
        }

<div class="container">
        <div class="fixed-div">
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
        </div>
    </div>

预期：如果高度只能容纳2个子div，则不应显示其他5个子div或将其完全裁剪

Answer 1

这可以通过CSS网格来完成，方法是定义最大宽度和动态行数，以及定义 overflow：hidden 以隐藏没有空间的项目。看看这个：

.fixed-div {
	display: grid;
	grid-template-rows: repeat( auto-fit, minmax(100px, 1fr));
	grid-template-columns: 100px;
	grid-auto-flow: column;
    background: greenyellow;
    max-height: calc(100vh - 10px);
	max-width: 100px;
	overflow: hidden;
}

.child-div {
    width: 60px;
    height: 60px;
    background: red;
    margin: 20px auto;
}

<div class="fixed-div">
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
            <div class="child-div">

            </div>
        </div>

Answer 2

使用flexbox和colmun方向，然后启用换行。当没有足够的空间容纳元素时，这些元素将自动移动到新列。由于您还固定了宽度，因此新列也将被隐藏。

.fixed-div {
  background: greenyellow;
  height: calc(100vh - 10px);
  width: 100px;
  position: fixed;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}

.child-div {
  width: 60px;
  height: 60px;
  background: red;
  margin:10px 20px;
}
.child-div:first-child {
 margin-top:20px;
}

<div class="container">
  <div class="fixed-div">
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
    <div class="child-div">

    </div>
  </div>
</div>

当父div发生溢出时，隐藏整个子div

2 个答案: