<!DOCTYPE html> <html> <head> <title>CSS Test: max-height block fragmentation</title> <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> <link rel="help" href="https://drafts.csswg.org/css-break"> <link rel="match" href="block-max-height-001b-ref.html"> <style> html,body { color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; width: 300px; } .columns { columns: 3; background: grey; margin-bottom: 1em; } .columns > div { max-height: 128px; background: yellow; border: solid; border-width:10px 0 6px 0; padding: 5px 0 3px 0; } .columns > div > div { height:200px; width:50px; border:solid; } </style> </head> <body> <div class="columns"> BEFORE <div> <div></div> </div> AFTER </div> <div class="columns" style="height:100px"> BEFORE <div> <div></div> </div> AFTER </div> <div class="columns" style="height:70px"> BEFORE <div> <div></div> </div> AFTER </div> <div class="columns" style="height:50px"> BEFORE <div> <div></div> </div> AFTER </div> </body> </html>