Ladybird multi-column content issue (column-width css property)

[jordanmartell0]

Hi, I'm a University of Utah student working on Ladybird as part of my final project for CS 4560 Web Browser Internals. While using the browser, I found a bug in how it positions text in separate columns, specifically with the column-width css property. I minimized the bug down to this simple html and css. Screenshots of how Chrome and Ladybird render this webpage are below

<style>
.menu-items{
    column-width:18em;
}
</style>    
<div class="menu-items">
    <div>1</div>
    <div>2</div>
</div>

Chrome:

Ladybird:

I am not super familiar with the code (it's possible that this property simply has not been implemented yet) but am interested in looking into this. I would need some pointers on how to proceed, so I'd appreciate if anyone could point my group in the right direction. Thanks!

[kalenikaliaksandr]

key component we currently lack to implement this property is CSS fragmentation support https://www.w3.org/TR/css-break-3/

[awesomekling]

And to be clear, implementing CSS fragmentation will be a very large undertaking with architectural changes across all of layout. Not suitable for a beginner project :)