I noticed when using `flex` that the container's content is allowed to overflow the container (column). How can I prevent this? I would like the content to have the max height and max width of whatever the column size is.

```css
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
[class*='col-'] {
  flex: 1;
}
.col-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
```

```html
<div class="row" style="height:250px;">

  <div class="col-6" style="background:red;">

  </div>
  <!-- /.col-6 -->

  <div class="col-6" style="background:blue;">

    <img src="https://pixabay.com/get/e83cb50c2ff1043ed1584d05fb0938c9bd22ffd41db9154792f2c47fa6/discus-fish-1943755_1280.jpg" />

  </div>
  <!-- /.col-6 -->

</div>
<!-- /.row -->
```