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

Question

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?

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

<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="">
    </div>
  </div>
</div>

here is the fiddle: http://jsfiddle.net/8r72g/5/

It's ok if it works only in IE10.

Answer 1

I've found how this can be done. If I use display:block on the .container and float:left in the inner containers, the image will be wrapped if it doesn't fit the width. And if I use overflow: hidden, the image will be moved under the text and hidden.

Here is the fiddle that proves this trick works: http://jsfiddle.net/8r72g/8/