block Vs inline-block

I would appreciate pointers to documentation or explanation to help me understand the difference between display values "block" and "inline-block". In particular, I do not understand why the minimum width of a div with display: inline-block; is the width of it's widest content but with display: block; the div can be narrower than its content, with the content overflowing horizontally.

Syndicate content