How does intrinsic work?

Question

I have never heard of this intrinsic value before until I come across this page on MDN.

From what I know intrinsic means

Answer 1

I have found that in iOS8, flexbox children may not always try to contain all their children and instead max their height to the available viewport. min-height: min-intrinsic fixes that problem.

Answer 2

It looks like the intrinsic value is part of the newer CSS3 sizing module:

http://dev.w3.org/csswg/css-sizing/

I have not used it yet but perhaps the reference will provide you with more information.

Based on a quick review, this module would make it easier to specify how content fills the width and height of a parent containing block.

At the moment, JavaScript functions are often used to compute widths and heights of container blocks based on % values for variable child elements content.

Answer 3

It allows you to set the width of an element to stretch wide enough to accommodate its children. So, if a div element contained a wide image and some text, the div would stretch wide enough to accommodate the image, and the text would begin breaking at that threshold.

Definitely experimental and not widely supported: http://caniuse.com/intrinsic-width

Answer 4

Intrinsic sizing determines sizes based on the contents of an element, without regard for its context.

http://dev.w3.org/csswg/css-sizing/#intrinsic-sizing