flexbox-box-sizing-on-items-horiz-1b.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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 on its flex items</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: 100px;
  15. height: 30px;
  16. border: 1px solid black;
  17. float: left;
  18. margin: 2px;
  19. }
  20. .container > * {
  21. box-sizing: border-box;
  22. }
  23. .itemA {
  24. flex-basis: 30px;
  25. background: purple;
  26. border: 4px solid indigo;
  27. }
  28. .itemB {
  29. flex-basis: 50px;
  30. background: teal;
  31. border: 5px solid lightblue;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- FIRST ROW -->
  37. <!-- 1 inflexible item -->
  38. <div class="container">
  39. <div class="itemA"></div>
  40. </div>
  41. <!-- 1 flexible item -->
  42. <div class="container">
  43. <div class="itemA" style="flex-grow: 1"></div>
  44. </div>
  45. <div style="clear: both"></div>
  46. <!-- SECOND ROW -->
  47. <!-- 2 inflexible items -->
  48. <div class="container">
  49. <div class="itemA"></div>
  50. <div class="itemB"></div>
  51. </div>
  52. <!-- 2 flexible items -->
  53. <div class="container">
  54. <div class="itemA" style="flex-grow: 1"></div>
  55. <div class="itemB" style="flex-grow: 1"></div>
  56. </div>
  57. </body>
  58. </html>