Background in container of multi column dont adjust

Question

Hi! well i have a problem im trying to put a large text inside a div "container" that has a multi column format whit css... but the background of the container doesnt adjust to all the text...

look at part of the code:

            .container {
                background:#000000;
                padding:30px;
                -ms-grid-column:1;
                -ms-grid-row:1;       
                column-fill: auto;
                column-gap: 40px;
                column-width: 480px;
                width:auto;
            }

As you can see, is just that the black background doesnt wraps all the text (just the first column)..
If i try to get the container width whit Javascript i get only the width of the black back... and if i try to get the width of the whole document i get only my screen size... but i can scroll and everything

Thanks for the help!

Answer 1

I had a similar problem with flexboxes, and I found that the flex box element's "scrollWidth" property in specific had the "real" width of the element. I was then able to set the element's style.width property to the scrollWidth to get the flex box to take up the right amount of space. Does the scroll width seem to work the same way with multicolumn objects?

Answer 2

Ooo! Thanks Green Banana! that works fine :D! I never thought try with this property...