details-percentage-height-children.html (750B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <style> 7 details { 8 background-color: orange; 9 width: 500px; 10 height: 300px; 11 } 12 summary { 13 /* Hide the triangle for comparing with div in reftest. */ 14 list-style-type: none; 15 } 16 summary { 17 background-color: green; 18 width: 50%; 19 height: 40%; 20 } 21 details::details-content { 22 height: 60%; 23 } 24 div#inner { 25 background-color: cyan; 26 width: 50%; 27 height: 100%; 28 } 29 </style> 30 <body> 31 <details open> 32 <summary>Summary: 40% height</summary> 33 <div id="inner">Div: 100% height, inside 60% height ::details-content pseudo</div> 34 </details> 35 </body> 36 </html>