CSS - padding (or margin) not resizing the container

Question

I'm trying to do some simple layout using CSS, where I have a container div, and two children set side by side using inline-block :

<div class="info-window">
    <img class="image" src="myURL"/>
    <div class=description">some content</div>
</div>

In CSS I set my container height, autoresize the image so that its height is 100% and keeping the ratio, and I do not specify any size for the description (I expect it will be set by its content).

.info-window .image {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: auto;
}

.info-window .description {
  display: inline-block;
  vertical-align: top;
}

This works just fine, until I try to add some padding or margin between both elements. Example : adding padding-left to the description, ie the item on the right. Note that the behaviour is the same with padding-ight on the image, or with margins.

.info-window .description {
  display: inline-block;
  vertical-align: top;
  padding-left: 5%;
}

When I do that, the container does not size properly to the total width of its children. It looks like the size is computed before the padding is added.

You can check this fiddle here : https://jsfiddle.net/tot22292/ See how the text is cut on the right.

I did search for some fixes, but box-sizing: border-box; to include the padding and border in the description's total size does not do the trick.

Answer 1

(Decided to make this into an answer. Hopefully someone can fill in the "why" of how the padding is determined by the browser.)

I don't have a link to any spec but this is definitely because the padding is a percent value. It makes sense too. percentage values for padding or margin are relative to the width of the parent. If the styling behaved as you expected, it would necessarily change the parent width.

Basically, with your current code, the padding affects the width and the width affects the padding. To resolve this, the browser's rendering engine appears to just use the pre-padded width to avoid an infinite loop. The "solution" would be to use static padding values instead of percentages.

.info-window {
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
}

.info-window .image {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: auto;
}

.info-window .description {
  display: inline-block;
  vertical-align: top;
  padding-left: 2em;
}

.info-window .title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}

<div id="test" style="height:150px;">
  <div class="info-window">
    <img class="image" src="//placehold.it/312" />
    <div class="description">
      <span class="title">Some text</span>
      <br/> 5
    </div>
  </div>
</div>

Edit:
Ok so here is where it's addressed in the spec.

If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.2.

8.4 Padding properties

The value being undefined means that it's up to the rendering engine, so it sounds like chrome at least just decides to fail over using the pre-padded width for the value.