| <style> |
| div.test { |
| inline-size: 100px; |
| border-block-start: 5px solid; |
| border-block-end: 15px solid; |
| -webkit-column-count: 2; |
| -webkit-column-gap: 0; |
| -webkit-column-fill: auto; |
| column-count: 2; |
| column-gap: 0; |
| column-fill: auto; |
| background-color: lightblue; |
| } |
| div.container { |
| block-size: 120px; |
| background-color: red; |
| inline-size: 100px; |
| margin-block-end: 8px; |
| } |
| </style> |
| <div> |
| <div class="container"> |
| <div class="test" style="block-size: 100px;"> |
| <div style="block-size: 20px;"> |
| <div style="block-size: 300px; background-color: yellow;"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="test"> |
| <div style="block-size: 20px;"> |
| <div style="block-size: 200px; background-color: yellow;"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="test"> |
| <div style="block-size: 10px;"></div> |
| <div style="-webkit-column-break-before: always; block-size: 10px;"> |
| <div style="block-size: 100px; background-color: yellow;"></div> |
| </div> |
| <div style="block-size: 20px;"></div> |
| </div> |
| </div> |
| </div> |
| <div style="-webkit-writing-mode: vertical-rl;"> |
| <div class="container"> |
| <div class="test" style="block-size: 100px;"> |
| <div style="block-size: 20px;"> |
| <div style="block-size: 300px; background-color: yellow;"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="test"> |
| <div style="block-size: 20px;"> |
| <div style="block-size: 200px; background-color: yellow;"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="test"> |
| <div style="block-size: 10px;"></div> |
| <div style="-webkit-column-break-before: always; block-size: 10px;"> |
| <div style="block-size: 100px; background-color: yellow;"></div> |
| </div> |
| <div style="block-size: 20px;"></div> |
| </div> |
| </div> |
| </div> |