button-display-flex-fullsize-1.html (925B)
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>CSS Test: 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: inline-flex; 22 justify-content: space-between; 23 align-items: stretch; 24 } 25 26 .flex > * { 27 margin: 1px; 28 background: teal; 29 min-height: 10px; 30 min-width: 10px; 31 } 32 33 .vertical { 34 flex-direction: column; 35 } 36 </style> 37 </head> 38 <body> 39 <button class="flex"> 40 <div></div> 41 <div></div> 42 <div></div> 43 </button> 44 <button class="flex vertical"> 45 <div></div> 46 <div></div> 47 <div></div> 48 </button> 49 </body> 50 </html>