如果元素仅使用css不适合可用宽度,我可以隐藏它吗？

Question

我有一个标题和一个图像,应该在绝对定位的div上水平布局.我在固定宽度的子块中显示文本.我试图通过CSS3的方式隐藏图像,如果它不适合绝对定位的容器,但我不能.我知道可以用JS做,但也许有CSS3方式？

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

这里是小提琴:http://jsfiddle.net/8r72g/5/

如果它仅适用于IE10,那就没关系.

Answer 1

我发现了如何做到这一点.如果我使用display:block的.container和float:left在内部容器中,如果它不适合宽度的图像将被包装.如果我使用overflow: hidden,图像将在文本下移动并隐藏.

这是证明这个技巧有效的小提琴:http://jsfiddle.net/8r72g/8/