flexbox-box-sizing-on-container-vert-1-ref.html 735 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  9. <meta charset="utf-8">
  10. <style>
  11. .container {
  12. width: 20px;
  13. height: 100px;
  14. border: 5px solid black;
  15. }
  16. .container > * {
  17. width: 18px;
  18. }
  19. .itemA {
  20. height: 38px;
  21. background: purple;
  22. border: 1px solid indigo;
  23. }
  24. .itemB {
  25. height: 58px;
  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>