Why do "display: inline-block" elements become 100% width when text is wrapping?

Question

I've got a portfolio-like page, displaying images in a grid with a title on top of it. The title is set to inline-block and has a background color, width depends on the length on the title. Whenever a title becomes too long to fit within the parent article it wraps to a second row; no problem. But why does the auto width result in 100% now?

.content{
  background: pink;
  width: 33%;
  float: left;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.title{

  position: absolute;
  bottom: 10%;
  left: 0;  
  text-align: center;
}
h2{
  display: inline-block;
  font-family: Arial;
  background: rgba(255,255,255,0.6);

}

Example: https://jsfiddle.net/6qtw7duf/

Answer 1

Ok..let's explain this in simple term