# Setting hard maximum height for flex container

**URL:** <https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 4, 2025, 7:24pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234 "2025-03-04T19:24:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anthony.justus.palme](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@anthony.justus.palme](https://forum.inductiveautomation.com/u/anthony.justus.palme)\
**Post date:** [March 4, 2025, 7:24pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234/1 "2025-03-04T19:24:15Z")

</div>

Hi all! I am currently working with a screen where we are using instances of an embedded flex container-based view in a flex repeater. The intended functionality of the display is that the height of the instances in the flex repeater will stop growing vertically at a certain set point. I have attempted to use a combination of basis and shrink properties while grow is set to 0, as well as tried adjusting properties at different levels in the hierarchy, but it results in scrollbars being used instead of shrinking when the display shrinks. Any suggestions on how I can achieve the desired functionality? My customer would prefer that we avoid using advanced stylesheets for maintenance purposes.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 4, 2025, 7:32pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234/2 "2025-03-04T19:32:53Z")

</div>

Add `maxHeight` to `props.elementStyle` to cap the upper height of each instance, or try setting `props.elementPosition` to `{grow: 0, shrink: 1, basis: auto}`

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2025, 7:37pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234/3 "2025-03-04T19:37:54Z")

</div>

> [@anthony.justus.palme](#):
>
> My customer would prefer that we avoid using advanced stylesheets for maintenance purposes.

This is a mistake on their part.  
The stylesheet makes maintenance easier as the style is defined in only one place. It's the way of the web.

---

<div class="post-metadata">

**Author:** ![anthony.justus.palme](https://avatars.discourse-cdn.com/v4/letter/a/bbce88/32.png) [@anthony.justus.palme](https://forum.inductiveautomation.com/u/anthony.justus.palme)\
**Post date:** [March 4, 2025, 7:46pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234/4 "2025-03-04T19:46:04Z")

</div>

I attempted both methods, but with no success. `maxHeight` doesn't seem to be doing anything (and doesn't appear as an option in the property menu for `props.elementStyle` by default), and 0 1 auto is leading to mismatched sizes on the individual instances and scrollbars instead of shrinking.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 4, 2025, 8:11pm UTC](https://forum.inductiveautomation.com/t/setting-hard-maximum-height-for-flex-container/103234/5 "2025-03-04T20:11:11Z")

</div>

Testing with `props.elementStyle` set to `{minHeight: 10px, maxHeight: 30px}` and `props.elementPosition` set to `{grow: 0, shrink: 0, basis: auto}` I can get larger instances (made larger by adjusting their text content) to size up until the `maxHeight` value.

> [@anthony.justus.palme](#):
>
> doesn't appear as an option

I believe a lot of the `min*` / `max*` css options don't show up in that list, but they do work. `gap` also doesn't show in that list and I use it extensively across projects.