stretch-input-in-column.html (1149B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: Stretch input form controls in flexbox column</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> 6 <link rel="match" href="reference/stretch-input-in-column-ref.html"> 7 <link href="support/flexbox.css" rel="stylesheet"> 8 <meta name="assert" content="This test ensures that input form controls that are stretched in 9 a column flexbox should not overflow the flexbox."> 10 <style> 11 .flexbox { 12 background-color: grey; 13 } 14 </style> 15 <body> 16 <p>This test passes if none of the form controls overflow.</p> 17 <div class="flexbox column"> 18 <input> 19 </div> 20 <div class="flexbox column align-content-flex-start"> 21 <textarea class="align-self-stretch"></textarea> 22 </div> 23 <div class="flexbox column wrap"> 24 <input type="button"> 25 </div> 26 <div class="flexbox column"> 27 <select></select> 28 </div> 29 <div class="flexbox column"> 30 <legend style="border: 2px solid black">legend</legend> 31 </div> 32 <div class="flexbox column wrap"> 33 <div type="border: 4px solid black; padding: 10px;"> 34 </div> 35 </body> 36 </html>