flex_nested-ref.rml 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <rml>
  2. <head>
  3. <title>Flex nested ref</title>
  4. <link type="text/rcss" href="../../style.rcss"/>
  5. <meta name="Reference" content="Reference implemented by wrapping the nested flex box in an extra div." />
  6. <style>
  7. #window {
  8. display: flex;
  9. width: 100%;
  10. height: 100%;
  11. overflow: hidden auto;
  12. flex-direction: row;
  13. justify-content: center;
  14. flex-wrap: nowrap;
  15. }
  16. .column {
  17. width: 40%;
  18. }
  19. .content {
  20. display: flex;
  21. height: 128px;
  22. text-align: center;
  23. flex-direction: row;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="window">
  29. <div class="column">
  30. <div class="content">
  31. <div style="width: 20%; background: red;">1</div>
  32. <div style="width: 60%; background: green;">2</div>
  33. <div style="width: 20%; background: blue;">3</div>
  34. </div>
  35. </div>
  36. <div class="column">
  37. <div class="content">
  38. <div style="width: 20%; background: red;">1</div>
  39. <div style="width: 60%; background: green;">2</div>
  40. <div style="width: 20%; background: blue;">3</div>
  41. </div>
  42. </div>
  43. </div>
  44. <handle size_target="#document"/>
  45. </body>
  46. </rml>