flexbox-intrinsic-sizing-horiz-2b.xhtml 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <!--
  7. This test is like the -2a variant, but with a <div> instead of an <img>
  8. at the deepest level of nesting.
  9. -->
  10. <html xmlns="http://www.w3.org/1999/xhtml">
  11. <head>
  12. <style>
  13. body { margin: 0; }
  14. div.flexbox {
  15. display: flex;
  16. width: -moz-max-content;
  17. /* We give the flex container a border and background so we can easily
  18. * see how large it is. */
  19. border: 2px dotted black;
  20. background: lime;
  21. }
  22. div.wrapper {
  23. border: 5px solid teal;
  24. width: 40px;
  25. height: 16px;
  26. }
  27. div.blueBlock {
  28. width: 16px;
  29. height: 16px;
  30. background: rgb(0, 19, 127); /* matches solidblue.png */
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="flexbox">
  36. <div class="wrapper"><div class="blueBlock"/></div>
  37. <div class="wrapper"><div class="blueBlock"/></div>
  38. <div class="wrapper"><div class="blueBlock"/></div>
  39. </div>
  40. </body>
  41. </html>