<div class="container">  
  <p>
    Without specifying a width, the element will take up the width of its container, and the content inside it will be bound to that width.
  </p>   
  <div class="element">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/max-width/kitten.jpeg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, vel, minima, quae atque et reprehenderit dolor in consequuntur amet ea ut autem enim laborum culpa nobis cupiditate id velit a!</p>
  </div>
  <p>
    Using <code>min-content</code>, the element will be narrowed down to the width of its widest inline element, which in this case is the image, and that will be the widest it can get (the maximum width).
  </p>
  <div class="element min-content">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/max-width/kitten.jpeg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, vel, minima, quae atque et reprehenderit dolor in consequuntur amet ea ut autem enim laborum culpa nobis cupiditate id velit a!</p>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  border: 1px solid #aaa;
  padding: 1em;
}

.element {
  margin-bottom: 30px;
  background-color: white;
  padding: 1em;
}

img {
  max-width: 200px;
}

.boxSizing {
  box-sizing: border-box;
}

.min-content {
  max-width: -webkit-min-content;
  max-width: -moz-min-content;
  max-width: min-content;
}