select-element-zero-height-002.html (893B)
1 <!DOCTYPE html> 2 <title>Select element with background color in flexbox with zero height</title> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1591925"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion"> 6 <link rel="match" href="select-element-zero-height-002-ref.html"> 7 <style> 8 .container { 9 display: flex; 10 flex-direction: column; 11 height: 0px; 12 border: 1px dotted black; 13 } 14 .with-background { 15 background: lime; 16 } 17 select { 18 /* 19 WebKit applies intrinsic (default) margins to control elements in some circumstances, 20 let's disable them to avoid mismatch errors caused by those margins. 21 */ 22 margin: 0; 23 } 24 </style> 25 <body> 26 <div class="container"> 27 <select class="with-background"><option>Hi</option></select> 28 </div> 29 </body>