clone-nowrap-intrinsic-size-ref.html (1717B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Reference: min/max-content size on box-decoration-break:clone 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 -webkit-box-decoration-break: clone; 25 box-decoration-break: clone; 26 } 27 28 f { margin-right: 30px; float: left; } 29 </style> 30 <body> 31 <f class="max"> 32 <div><span>aaa</span><span>aaa</span> 33 </div> 34 <div><span>aaa</span>aa<span>aaa</span> 35 </div> 36 <div><span>aaa</span> <span>aaa</span> 37 </div> 38 <div><span>aaa </span><span>aaa</span> 39 </div> 40 <div><span>aaa</span><span> aaa</span> 41 </div> 42 <div><span>aaa</span> aa<span>aaa</span> 43 </div> 44 <div><span>aaa </span>aa<span>aaa</span> 45 </div> 46 <div><span>aaa</span>aa<span> aaa</span> 47 </div> 48 <div><span>aaa</span> aa <span>aaa</span> 49 </div> 50 <div><span>aaa</span>aa <span>aaa</span> 51 </div> 52 <div><span>aaa</span>aa</div> 53 </f> 54 55 <f class="max"> 56 <div><span>aaa</span><span>aaa</span> 57 </div> 58 <div><span>aaa</span>aa<span>aaa</span> 59 </div> 60 <div><span>aaa</span> <span>aaa</span> 61 </div> 62 <div><span>aaa </span><span>aaa</span> 63 </div> 64 <div><span>aaa</span><span> aaa</span> 65 </div> 66 <div><span>aaa</span> aa<span>aaa</span> 67 </div> 68 <div><span>aaa </span>aa<span>aaa</span> 69 </div> 70 <div><span>aaa</span>aa<span> aaa</span> 71 </div> 72 <div><span>aaa</span> aa <span>aaa</span> 73 </div> 74 <div><span>aaa</span>aa <span>aaa</span> 75 </div> 76 <div><span>aaa</span>aa</div> 77 </f>