How to make the list adjust the size here?

Asked Aug 19 '23 at 12:27

Active Aug 19 '23 at 13:56

Viewed 37 times

Here is the list:

ul {
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    list-style: none;
    max-height: 192px;
    padding: 5px;
    background: #090;
}

li {
    flex: 1 0 30px;
    min-width: 100px;
    margin: 1px;
    padding: 0 2px;
    background: rgba(255, 0, 0, 0.75);
    color: #fff;
    font-family: arial;
    line-height: 30px;
}

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

And when I set max-height to 192px, it doesn't adjust, but when I don't have max-height, it works fine. What do I have to do to fix it?

edited Aug 19 '23 at 13:56

Script Host

asked Aug 19 '23 at 12:27

metiran

what is excepted output I am confused here. – Script Host Aug 19 '23 at 13:01
Is the green box supposed to adjust its width to the red children? – Al John Aug 19 '23 at 13:11
Yes, the green box supposed to adjust its width to the red children. @AlJohn – metiran Aug 19 '23 at 13:55
I want that when the max-height is set as in the first photo, the green box would behave the same as in the 2nd photo, that is, to adjust its width to the red children. @ScriptHost – metiran Aug 19 '23 at 14:00

How to make the list adjust the size here?

0 Answers0