<!DOCTYPE html> <style> .row-wrapper, .column-wrapper { margin: 4px 0; overflow: auto; direction: rtl; border: 2px solid black; } .column-wrapper { width: 300px; } .row-wrapper { height: 300px; writing-mode: vertical-rl; } .column-wrapper > div { /* This border represents the expected rendering of the testcase's "margin:4px". This border should occupy the same space as that margin would, and it should create the same amount of scrollable overflow. (We can't just use "margin:4px" here, because this reference case uses block layout, and margins have different behavior with respect to collapsing and scrollable-overflow impact in block vs. flexbox layout.) */ border: 4px solid white; height: 30px; background: #CCC; } .h-overflow { width: 500px; } .row-wrapper > div { /* As noted above, this is a mockup for the "margin:4px" in the testcase. */ border: 4px solid white; width: 30px; background: #CCC; } .v-overflow { height: 500px; } </style> <div class=column-wrapper> <div>one</div> <div class=h-overflow>two</div> </div> <div class=row-wrapper> <div>one</div> <div class=v-overflow>two</div> </div>