layout/reftests/flexbox/flexbox-box-sizing-on-container-horiz-1.html

   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 a horizontal flex container with box-sizing:border-box</title>
   9   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  10   <meta charset="utf-8">
  11   <style>
  12     .container {
  13       display: flex;
  14       width: 110px;
  15       height: 30px;
  16       border: 5px solid black;
  17       box-sizing: border-box;
  18     }
  19     .itemA {
  20       flex: 1 28px;
  21       background: purple;
  22       border: 1px solid indigo;
  23     }
  24     .itemB {
  25       flex: 1 48px;
  26       background: teal;
  27       border: 1px solid lightblue;
  28     }
  29   </style>
  30 </head>
  31 <body>
  32   <div class="container">
  33     <div class="itemA"></div>
  34     <div class="itemB"></div>
  35   </div>
  36 </body>
  37 </html>