# UI shrinking on flexbox

**URL:** <https://forums.creativeclouddeveloper.com/t/ui-shrinking-on-flexbox/7917>\
**Category:** UXP Plugin API\
**Tags:** ui\
**Created:** [May 20, 2024, 8:10am UTC](https://forums.creativeclouddeveloper.com/t/ui-shrinking-on-flexbox/7917 "2024-05-20T08:10:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![argie\_olendan](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@argie\_olendan](https://forums.creativeclouddeveloper.com/u/argie_olendan)\
**Post date:** [May 20, 2024, 8:10am UTC](https://forums.creativeclouddeveloper.com/t/ui-shrinking-on-flexbox/7917/1 "2024-05-20T08:10:41Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/a/ae4746b078e99964f866823a76f5725eafd096db.png)

here is my CSS

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

```

---

<div class="post-metadata">

**Author:** ![argie\_olendan](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@argie\_olendan](https://forums.creativeclouddeveloper.com/u/argie_olendan)\
**Post date:** [May 20, 2024, 8:11am UTC](https://forums.creativeclouddeveloper.com/t/ui-shrinking-on-flexbox/7917/2 "2024-05-20T08:11:36Z")

</div>

is there any alternatives or fix that I can use?

---

<div class="post-metadata">

**Author:** ![YesserKira](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/yesserkira/32/3796_2.png) [@YesserKira](https://forums.creativeclouddeveloper.com/u/YesserKira)\
**Post date:** [May 20, 2024, 12:14pm UTC](https://forums.creativeclouddeveloper.com/t/ui-shrinking-on-flexbox/7917/3 "2024-05-20T12:14:28Z")

</div>

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

```auto
. .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:

```auto
<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>

```