div not floating inside parent div with display inline-block

Question

I want to make both child divs to be inline inside the red box

.parent {
  width: 35%;
  height: 200px;
  background-color: red;
  display: inline-block;
  margin: 30px auto
}
.parent div {
  display: inline-block;
}

<div class="parent">
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>

Fiddle : here

using Float : left and Display : inline-block on child div does not work. while using display : flex breaks the structure.

Answer 1

This happens because img is a replaced element with its own intrinsic dimensions:

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model. Typical replaced elements are: <iframe>,<video>,<embed>,<img>.

and:

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

Note that if there is a text here instead of an image, it works as desired:

.parent {
  width: 35%;
  height: 200px;
  background-color: red;
  display: inline-block;
  margin: 30px auto
}
.parent div {
  display: inline-block;
}

<div class="parent">
  <div style="float : left">
    Text 1
  </div>
  <div style="float : left">
    Text 2
  </div>
</div>

Solution:

So the solution is to specify the dimesions of the container for the replaced element here.

So give a width to the .parent div and put max-width: 100% for the img to fill .parent div like this:

.parent {
  width: 35%;
  height: 200px;
  background-color: red;
  display: inline-block;
  margin: 30px auto
}
.parent div {
  display: inline-block;
  width: 30%;
}
.parent div img {
  width: auto;
  max-width: 100%;
}

<div class="parent">
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
  <div style="float : left">
    <img width=30% src="http://assets.bmdstatic.com/assets/Data/image_product_500x500/CANON--SKU10516586-2016926135639.jpg" />
  </div>
</div>