# Horizontal scroll when overlay appears inside flex container

**URL:** <https://forum.inductiveautomation.com/t/horizontal-scroll-when-overlay-appears-inside-flex-container/23835>\
**Category:** Ignition Early Access\
**Created:** [April 3, 2019, 10:21pm UTC](https://forum.inductiveautomation.com/t/horizontal-scroll-when-overlay-appears-inside-flex-container/23835 "2019-04-03T22:21:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kingw](https://avatars.discourse-cdn.com/v4/letter/k/7ab992/32.png) [@kingw](https://forum.inductiveautomation.com/u/kingw)\
**Post date:** [April 3, 2019, 10:21pm UTC](https://forum.inductiveautomation.com/t/horizontal-scroll-when-overlay-appears-inside-flex-container/23835/1 "2019-04-03T22:21:09Z")

</div>

When I embed a cylindrical tank in a flex (column) component view, I get a horizontal scroll bar whenever there is an error (such as dead Modbus) in the cylindrical tank. It appears the exclamation mark in the upper-right-hand corner of the (cylindrical tank) overlay is the culprit: it exceeds some bounds of the flex component which causes chrome to create a horizontal scroll bar.

I got around this by nesting a coordinate view with the cylindrical tank with some SVG to essentially make the cylindrical tank wider. Is there a way to leave overlays on (not check Overlay opt-out) without having the embedded component get wider (and therefore cause a horizontal scroll bar)? Would be nice if there was a way to widen or pad the flex component a little bit extra so the Modbus error overlay did not cause a horizontal scroll bar. Just not crazy about having scroll bars appear unexpectedly in my P&ID.

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [April 8, 2019, 4:51pm UTC](https://forum.inductiveautomation.com/t/horizontal-scroll-when-overlay-appears-inside-flex-container/23835/2 "2019-04-08T16:51:32Z")

</div>

I have reproduced this. A workaround is to add the style “padding: 10px” to the flex container. “overflow: hidden” also works, but it clips the edges of the warning icon.

---

<div class="post-metadata">

**Author:** ![kingw](https://avatars.discourse-cdn.com/v4/letter/k/7ab992/32.png) [@kingw](https://forum.inductiveautomation.com/u/kingw)\
**Post date:** [April 8, 2019, 5:56pm UTC](https://forum.inductiveautomation.com/t/horizontal-scroll-when-overlay-appears-inside-flex-container/23835/3 "2019-04-08T17:56:56Z")

</div>

Darn. I had tried padding, but I missed the padding capability in the root of the flex container: I had tried padding the cylindrical tank itself (in the flex container). Nice simple solution: I ended up right padding the root 10px and bottom padding 5 px to get rid of both scroll bars. Thanks for the simple solution!
