clone-intrinsic-size-ref.html (1759B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Reference: min/max-content size on box-decoration-break:clone inline box</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 .min > div { 18 width: min-content; 19 } 20 21 span { 22 border: 2px solid gray; 23 padding: 0 10px 0 6px; 24 border-width: 0 8px 0 5px; 25 margin: 0 4px 0 3px; 26 background: yellow; 27 -webkit-box-decoration-break: clone; 28 box-decoration-break: clone; 29 } 30 31 f { margin-right: 30px; float: left; } 32 </style> 33 <body> 34 <f class="max"> 35 <div><span>aaa</span><span>aaa</span> 36 </div> 37 <div><span>aaa</span>aa<span>aaa</span> 38 </div> 39 <div><span>aaa</span> <span>aaa</span> 40 </div> 41 <div><span>aaa </span><span>aaa</span> 42 </div> 43 <div><span>aaa</span><span> aaa</span> 44 </div> 45 <div><span>aaa</span> aa<span>aaa</span> 46 </div> 47 <div><span>aaa </span>aa<span>aaa</span> 48 </div> 49 <div><span>aaa</span>aa<span> aaa</span> 50 </div> 51 <div><span>aaa</span> aa <span>aaa</span> 52 </div> 53 <div><span>aaa</span>aa <span>aaa</span> 54 </div> 55 <div><span>aaa</span>aa</div> 56 </f> 57 58 <f class="min"> 59 <div><span>aaa</span><span>aaa</span> 60 </div> 61 <div><span>aaa</span>aa<span>aaa</span> 62 </div> 63 <div><span>aaa</span><br><span>aaa</span> 64 </div> 65 <div><span>aaa</span><br><span>aaa</span> 66 </div> 67 <div><span>aaa</span><span><br>aaa</span> 68 </div> 69 <div><span>aaa</span><br>aa<span>aaa</span> 70 </div> 71 <div><span>aaa</span><br>aa<span>aaa</span> 72 </div> 73 <div><span>aaa</span>aa<span><br>aaa</span> 74 </div> 75 <div><span>aaa</span><br>aa<br><span>aaa</span> 76 </div> 77 <div><span>aaa</span>aa<br><span>aaa</span> 78 </div> 79 <div><span>aaa</span>aa</div> 80 </f>