Can I hide the element if it doesn't fit the available width using css only?

Can I hide the element if it doesn't fit the available width using css only?

I have a header and an image that should be horizontally laid out on the
absolutely positioned div. I'm showing the text in the subdiv with the
fixed width. I'm trying to hide the image if it doesn't fit into the
absolutely positioned container by the means of CSS3, but I can't. I know
it's possible to do with JS, but maybe there is a CSS3 way?
<div style="position: relative; width: 500px; height:500px;">
<div class="container">
<div class="part-one">
<h1 class="header">This is some header</h1>
</div>
<div class="utilizationContainer" class="part-two">
<img src=""></h1>
</div>
</div>
</div>
.container {
display: -ms-flexbox;
-ms-flex-direction: row;
-ms-flex-pack: justify;
overflow-x: hidden;
position: absolute;
left: 60px;
right: 60px;
bottom: 0px;
height: 400px;
}
.part-one {
left: 0px;
bottom: 100px;
width: 300px;
font-size: 22pt;
color: white;
min-width: 300px;
}
.part-two {
max-width: 400px;
width: 400px;
min-width: 50%;
}
.header {
font-size: 50pt;
color: blue;
margin-bottom: 10px;
}
here is the fiddle: http://jsfiddle.net/8r72g/5/
It's ok if it works only in IE10.