Flexbox items in flexbox item expanding parent - css

Question

I am having a problem while trying to use Flexbox for some markup.
I have made this codepen to demonstrate my problem: http://codepen.io/anon/pen/QjbzJY?editors=110
I want the image in the left(.item1 - The multicolor image) to dictate the width of the right box (.item2 - That contains alle the .itemitem$).
But as it is now the right box gets wider and presses the left one.
Hope one of you can help me get to a solution! :)
The Code:
<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%;
}

Answer 1

It seems like flex-shrink: 0; on the box i don't want to shrink does the trick!