button-display-flex-fullsize-1-ref.html (1006B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>Reference: Testing for full height flex container in a button.</title> 9 <meta charset="utf-8"> 10 <style> 11 button { 12 vertical-align: top; 13 padding: 0; 14 border: solid 1px black; 15 background: lightblue; 16 width: 200px; 17 height: 200px; 18 } 19 20 .flex { 21 display: flex; 22 justify-content: space-between; 23 align-items: stretch; 24 width: 100%; 25 height: 100%; 26 } 27 28 .flex > * { 29 margin: 1px; 30 background: teal; 31 min-height: 10px; 32 min-width: 10px; 33 } 34 35 .vertical { 36 flex-direction: column; 37 } 38 </style> 39 </head> 40 <body> 41 <button> 42 <div class="flex"> 43 <div></div> 44 <div></div> 45 <div></div> 46 </div> 47 </button> 48 <button> 49 <div class="flex vertical"> 50 <div></div> 51 <div></div> 52 <div></div> 53 </div> 54 </button> 55 </body> 56 </html>