Is there a way using **CSS only** (not JS) to hide an entire list item or div if a part of it is being cut off via overflow:hidden?

Question

Firstly this question has been before (in a fashion) but without examples: Hiding an element completly that has had some overflow hidden

The Problem

I'm using the Gridster framework http://gridster.net/ to display some content and it uses a fixed height on each content area with overflow:hidden.

The content that I place in each content area could be 10 characters long or 100 characters (in a responsive framework) bootstrap and so can sometime get cut off.

Supporting Images

How it looks now

How I would like it to look

Example code

HTML

<div class="example_container">
<div class="WidgetContent pull-left">
<ul class="unstyled">    
<li class="person ActivePerson">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">James Harris</a>
</li>
<li>Senior Management</li>
<li>London</li>
<li>VP, Marketing Communications</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">76</span>
</div>
</li>                
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#" data-personid="309">Carlos Fernandez</a>
</li>
<li>Senior Management</li>
<li>Madrid</li>
<li>Senior Business Development Coordinator</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">72</span>
</div>
</li>                   
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Kate Evans</a>
</li>
<li>Research</li>
<li>London</li>
<li>Communications Systems Analyst - Millar A/C Manager</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">71</span>
</div>
</li>                  
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Brian Montrose</a>
</li>
<li>Business Development</li>
<li>New York</li>
<li>Business Development Analyst</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">70</span>
</div>
</li>                            
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Alison Roberts</a>
</li>
<li>HR</li>
<li>San Francisco</li>
<li>HR - Pension</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">68</span>
</div>
</li>                            
</ul>
</div></div>

CSS

.example_container { width:300px; height:325px; overflow:hidden; }
.WidgetContent {
width: 100%;
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: left;
}
ul.unstyled, ol.unstyled {
list-style: none outside none;
margin-left: 0;
padding:0;
}
.ActivePerson {
background-color: #FCF8E3;
}
.person {
border-bottom: 1px dashed #E2E2E2;
display: block;
padding: 7px 50px;
}
li {
overflow: hidden;
}
.StaffThumb img {
border-radius: 3px;
height: 35px;
margin: 4px 10px 0 0;
width: 35px;
}
.StaffThumb {
left: 10px;
margin: 0;
position: absolute;
}
.container-number {
position: absolute;
right: 10px;
}
.ActivePerson .label {
background-color: #F89406;
}
.label {
font-size: 16px;
line-height: 20px;
margin: 0 5px;
position: relative;
top: 5px;
border-radius: 3px;
padding: 1px 4px 2px;
}

Example Fiddle

http://jsfiddle.net/3sTNL/

Answer 1

This little extra CSS: Uses flex layout

.WidgetContent {
    height: 100%;
}
.WidgetContent > .unstyled {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    float:left;
    height: 100%;
}
.person {
    position: relative;
}

fiddle here

Answer 2

YES!

• Add column-width to the ul, equal to the container's width.
• Add height to the ul, equal to the container's height minus padding/margin
• Add break-inside:avoid (-webkit-column-break-inside) to the .people items

Result: http://jsfiddle.net/3sTNL/3/ (Tested in Chrome)

This is VERY haxy XD But it works!