Restrict Width On Element To Width Of First Child

I have a pretty tricky situation here which I am trying to solve with CSS only. Basically, the idea is extremely simple, I have an .item div which holds an img and a p. The image c

Solution 1:

Solution #1 - The display:table method

1) Set display:table on the item

2) Give it a very small width say width: 1px

.item {
  display: table;
  width: 1px;
  background: tomato;
}

Updated JsBin

body {
  text-align: center;
}
.item {
  display: table;
  width: 1px;
  background: tomato;
}
.item img {
  display: block;
  /* removes spacing from inline-block (default) */
  width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<div class="item">
  <img src="http://dummyimage.com/500x700/">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p>
</div>

Solution #2 - Make use of intrinsic sizing (not IE compatible)

.item {
  width: -moz-min-content; 
  width: -webkit-min-content; 
  width: min-content;
  background: tomato;
}

.item {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  background: tomato;
}
.item img {
  display: block;
  /* removes spacing from inline-block (default) */
  width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<div class="item">
  <img src="http://dummyimage.com/500x700/">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p>
</div>

1) Browser support is quite good (except for IE)

2) Here's an article explaining the min-content property