Is there a CSS only way to completely hide elements that partially overflow?

Question

Imagine you have an element that has a height that is a percentage of the browser window height. This element contains a bunch of block elements.

Is there a way to use something like overflow: hidden but make sure that the last block element is completely hidden instead of partially hidden if it overflows?

(This is pretty easy to do with JavaScript, but I'd prefer to solve this with the stylesheet.)

Answer 1

It wasn't possible in 2013, but now all IE<=10 are dead, we can use flexbox.

The basic idea is to wrap flex items out of visible area.

Remove overflow: hidden; to see where the items go.

$('.parent').ready(function() {
  $('.parent').resizable();
})

* {
  box-sizing: border-box;
}
.parent {
  height:288px;
  width: 233px;
  border: 5px dashed blue;
  background: yellow;
  
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}

.child {
  height: 100px;
  width: 100%;
  border: 5px solid brown;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>