UI shrinking on flexbox

Photoshop UXP Plugin API
1

HI,

I was developing a UXP plugin and encountered a UI issue using CSS flexbox. I shrinks and overlaps the elements when I set an max height and overflow of scroll

image
image1222×375 19.2 KB

here is my CSS

.message-list {
    height: 350px;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
  }
2

is there any alternatives or fix that I can use?

3

Try this and make sure you have message class in your html code

.        .message-list {
            max-height: 350px;
            display: flex;
            flex-direction: column-reverse;
            overflow-y: auto;
            padding: 10px;
            box-sizing: border-box;
            background-color: #2c2f33; 
        }

        .message {
            flex: 0 0 auto;
            margin: 5px 0;
            padding: 10px;
            background: #4a4a4a; 
            color: #ffffff;
            border-radius: 5px;
            box-sizing: border-box;
        }

Exemple of html for testing:

<div class="message-list">
        <div class="message">
            <p><strong>20 May 2024 17:12</strong></p>
            <p>Tom Haynes reopened the deliverable job.</p>
        </div>
        <div class="message">
            <p><strong>Angular Challenge.pdf_v1 Completed</strong></p>
            <p>test 2</p>
        </div>
        <div class="message">
            <p><strong>20 May 2024 07:12</strong></p>
            <p>Angular Challenge.pdf_v1 Changes Requested</p>
        </div>
        <!-- Add more messages as needed -->
</div>