Hide entire child div when overflow occur in parent div

Question

I have 5 child div inside a fixed parent div whose height varies based on device. I'm looking for any hack to hide the entire div if it cannot fit in the fixed parent div.

I've tried "overflow: hidden;" but it only crops the part that is overflowing and not the entire 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>

Expected: If the height can accomudate only 2 child div then other 5 child div should not be displayed or cropped completely

related: https://stackoverflow.com/q/43547430 – djvg May 10 '23 at 11:34 — djvg, May 10 '23 at 11:34

score 2 · Answer 1 · edited May 10 '23 at 11:49

This can be done with CSS grid, by defining a max-width and a dynamic number of rows, as well as defining overflow: hidden to hide items that don't have space. Take a look at this:

.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>

score 1 · Accepted Answer · edited May 10 '23 at 11:54

Use flexbox and a colmun direction then enable the wrap. The elements will automatically move to a new column when there isn't enough space to hold them. Since you also fixed the width the new column will get hidden too.

.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>

Thanks, flex solution works perfect with the bootstrap. (Y) – Aug 15 '19 at 06:15 — , Aug 15 '19 at 06:15

Hide entire child div when overflow occur in parent div

2 Answers2