Making width: Webkit-min-content responsive

Question

I have a simple HTML fragment:

<div>
    <img src="http://www.placehold.it/200x200">
    <p>Lorem ipsum da dee da herp de derp I like coffee coffee coffee</p>
</div>

My CSS:

div {max-width: webkit-min-content; max-width: -moz-min-content;} 
img {max-width: 100%} 

Fiddle: http://jsfiddle.net/vs2zxc8c/1/

See how it looks in Firefox and shrink the window screen. This is the behavior I want: When there is space available, the image has its normal size and the text will go under the image. When the image overflows, I want to shrink it. This works on Firefox.

However, the Webkit version does not seem to work. Applying max-width:100% image causes the image to shrink to the size of the longest paragraph word.

There is a fix for this in -Webkit browsers, or this is a bug?

Answer 1

You can solve this problem by setting the size of the div where the other elements are located.

Example:

div {max-width: 100%;} 
img {max-width: 100%} 

In this way, as in the example, he had occupied the canvas in its fullness (I refer to the width) and only then is it already responsive.

This way it will work on all browsers, because we apply a "universal rule".

Note:

• To set the width of div used % to allow a "responsive" behavior, ie to give adaptability to according to screen size.