CODEWITHSUNDEEP
css
Blixt
Blixt

Reputation: 50169

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

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

Upvotes: 8

Views: 4448

Answers (2)

Qi Fan
Qi Fan

Reputation: 827

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>

Upvotes: 12

Bernie
Bernie

Reputation: 1489

Alright, there is essentially no way in which you can do this with pure CSS, unless you happen to be developing only for earlier internet explorer versions (use of expression()).

Basically, it's no longer possible to run javascript within a style sheet (which was really your only option of doing this all on the style sheet).

It's not that difficult to do in Jquery though: http://jsfiddle.net/bernie1227/wCx9N/

This solution basically just utilises:

pageWidth - (elementWidth + elementLeft) < 0

In order to check if the element is overflowing.

Upvotes: 0

Related Questions