slice-nowrap-intrinsic-size-ref.html (1627B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Reference: min/max-content size on box-decoration-break:slice inline box w. white-space:nowrap</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 <style> 6 html,body { 7 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 8 } 9 10 div { 11 border: 5px solid blue; 12 white-space: pre; 13 } 14 .max > div { 15 width: max-content; 16 } 17 18 span { 19 border: 2px solid gray; 20 padding: 0 10px 0 6px; 21 border-width: 0 8px 0 5px; 22 margin: 0 4px 0 3px; 23 background: yellow; 24 } 25 26 f { margin-right: 30px; float: left; } 27 </style> 28 <body> 29 <f class="max"> 30 <div><span>aaa</span><span>aaa</span></div> 31 <div><span>aaa</span>aa<span>aaa</span></div> 32 <div><span>aaa</span> <span>aaa</span></div> 33 <div><span>aaa </span><span>aaa</span></div> 34 <div><span>aaa</span><span> aaa</span></div> 35 <div><span>aaa</span> aa<span>aaa</span></div> 36 <div><span>aaa </span>aa<span>aaa</span></div> 37 <div><span>aaa</span>aa<span> aaa</span></div> 38 <div><span>aaa</span> aa <span>aaa</span></div> 39 <div><span>aaa</span>aa <span>aaa</span></div> 40 <div><span>aaa</span>aa</div> 41 </f> 42 43 <f class="max"> 44 <div><span>aaa</span><span>aaa</span></div> 45 <div><span>aaa</span>aa<span>aaa</span></div> 46 <div><span>aaa</span> <span>aaa</span></div> 47 <div><span>aaa </span><span>aaa</span></div> 48 <div><span>aaa</span><span> aaa</span></div> 49 <div><span>aaa</span> aa<span>aaa</span></div> 50 <div><span>aaa </span>aa<span>aaa</span></div> 51 <div><span>aaa</span>aa<span> aaa</span></div> 52 <div><span>aaa</span> aa <span>aaa</span></div> 53 <div><span>aaa</span>aa <span>aaa</span></div> 54 <div><span>aaa</span>aa</div> 55 </f>