#cssref max-width (2) | Embed - Codrops Playground

<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>max-content</code>, the element will be stretched to fit the width of its content, without breaking the content at any soft breaks. That is, the paragraph will continue as one line, without breaking into multiple lines, and the element will stretch to fit it.
  </p>
  <div class="element max-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: 20px;
}

.element {
  padding:20px;
  margin-bottom: 30px;
  background-color: white;

  padding: 20px 30px;
} 

img {
  max-width: 200px;
}

.boxSizing {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.max-content {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}