flexbox-box-sizing-on-container-horiz-1-ref.html 753 B

123456789101112131415161718192021222324252627282930313233343536373839
  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: 100px;
  13. height: 20px;
  14. border: 5px solid black;
  15. }
  16. .container > * {
  17. height: 18px;
  18. float: left;
  19. }
  20. .itemA {
  21. width: 38px;
  22. background: purple;
  23. border: 1px solid indigo;
  24. }
  25. .itemB {
  26. width: 58px;
  27. background: teal;
  28. border: 1px solid lightblue;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="container">
  34. <div class="itemA"></div>
  35. <div class="itemB"></div>
  36. </div>
  37. </body>
  38. </html>