3

From CSS 2.1 spec,

the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

When available width <= preferred minimum width <= preferred width, the used width will be the preferred minimum width.

However, the spec also explains that the preferred minimum width is the minimal width a box could take that doesn’t lead to content overflowing by trying all possible line breaks.

Then under what circumstance is "preferred minimum width" greater than the "available width"? Can someone give an example? Thanks

Jerry Zhao
  • 31
  • 1
  • 3
  • I think you asked question in tricky way but at the end of this you want to ask about `width` and `min-width` used together? Please confirm if I'm wrong. – Riddhi Aug 10 '18 at 07:13
  • https://stackoverflow.com/a/34996189/2802040 – Paulie_D Aug 10 '18 at 12:35

1 Answers1

1

The available width is a property of the container. The preferred width and preferred minimum width are properties of the content. If a part of the content has no line break opportunities for greater than the container's width, the preferred minimum width will be greater than the available width. The most obvious case would be where the content has a very long word.

div { /* This is the container that determines the available width */
  width : 200px; 
  background-color:lightblue;
  font-size: 24px;
}

p { /* This block's width is determined by the shrink-to-fit algorithm */
  display:inline-block; 
}
<div>
  <p>
     Opposition to the disestablishment of the Church of 
     England is called antidisestablishmentarianism.
  </p>
</div>

Other reasons why line break opportunities might not exist within the available width are the presence of inline-blocks in the content, using non-breaking spaces between words, white-space:pre use, etc.

Alohci
  • 78,296
  • 16
  • 112
  • 156