Flexbox项目中的Flexbox项目扩展父

Question

我在尝试使用Flexbox进行某些标记时出现问题。 我已经使用此codepen来演示我的问题：http://codepen.io/anon/pen/QjbzJY?editors=110

我希望左边的图像（.item1 - 多色图像）指示右边框的宽度（.item2 - 包含.itemitem $）。 但正如现在一样，正确的盒子会变宽并按下左边的盒子。

希望你们中的一位能帮助我找到解决方案！ :)

守则：

<div class="parent">
  <div class="item1">
    <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt="" />
  </div>
  <div class="item2">
    <div class="itemitem1 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem2 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem3 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem4 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem5 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem6 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem7 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem8 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
    <div class="itemitem9 item">
      <div class="innerimg"><img src="http://hartcornstudios.com/wp-content/uploads/2014/01/1280x900textPlaceholder-Image.gif" alt="" /></div>
      <div class="innertext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non lorem ante. Curabitur fermentum ligula vel quam fermentum, eget suscipit mauris dictum.</div>
    </div>
  </div>
</div>

CSS：

* {
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

body {
  background: black;
}

img {
  max-wifth: 100%;
  max-height: 100%;
}

.parent {
  width: 930px;
  height: 180px;
  display: -webkit-flex;
  align-items: stretch;
  background-color: gray;
}

.item1 {
  display: -webkit-flex;
  align-items: center;
  -webkit-justify-content: space-around;
  -webkit-flex-grow: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.item2 {
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-flex-grow: 0;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -webkit-align-content: space-between;
  max-width: 100%;
  background: red;
  height: 100%;
}

.item {
  width: 49%;
  height: 100%;
  background-color: #fff;
  margin-bottom: 5px;
  box-sizing: border-box;
  display: -webkit-flex;
  background: green;
}

.innerimg {
  width: 50%;
  height: 100%;
}

.innertext {
  width: 50%;
  height: 100%;
}

.innerimg img {
  max-width: 100%;
  max-height: 100%;
}