# Fill Flex Container Space with Style

**URL:** <https://forum.inductiveautomation.com/t/fill-flex-container-space-with-style/85034>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 31, 2024, 5:28pm UTC](https://forum.inductiveautomation.com/t/fill-flex-container-space-with-style/85034 "2024-01-31T17:28:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex.chmelka](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex.chmelka/32/26672_2.png) [@alex.chmelka](https://forum.inductiveautomation.com/u/alex.chmelka)\
**Post date:** [January 31, 2024, 5:28pm UTC](https://forum.inductiveautomation.com/t/fill-flex-container-space-with-style/85034/1 "2024-01-31T17:28:15Z")

</div>

I'm looking to create a flex container for a side view navigation. The image below is a mockup of the sidebar, with each rectangle being a button. Text was redacted with the black squares for security.

 ![2024-01-31_11-08-33](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f44217b5c5e0170f9ec74ee1160ae129516ad31.png)

I have created the flex container and have created a style that matches the coloring of the mockup. The issue I'm having is filling the background that the container stretches with a color. Here is my current page with redacted pieces:

 ![2024-01-31_11-16-32](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75d047152ab891d949356400844e831947df2b78.png)

My page configuration is the image below. Note that my flex view is set to the left side of the page and header view to the topstrong text:

 ![2024-01-31_11-24-45](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbca8d3f79352eb6af759fd70c089fb38c87450c.png)

**My problem: I would like the extra space on the left that the flex container view stretches to the size of the page to be filled a custom color. It currently has the default gray that a view uses without a set background color.**

My flex view contains just a menu tree component and I have the following setup on the container.

 ![2024-01-31_11-21-51](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af0c714e04da555cc4c6a5d480726c52f2f1bdae.png)

![2024-01-31_11-19-43](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0c1064792e11b1d77533808d7269ccd235cdda2.png)

I feel like I'm missing some basic setup option, but I have been going in circles trying to find a solution to this on the forums or the docs. Any help would be appreciated. Thanks.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 31, 2024, 8:13pm UTC](https://forum.inductiveautomation.com/t/fill-flex-container-space-with-style/85034/2 "2024-01-31T20:13:17Z")

</div>

Consider the tall rectangle which is your Docked View.

The `root` node of your View will span that entire space at all times. The component will only span the space it needs and/or you have defined. So instead of styling the component, you need to style the `root` node to have the appearance you expect. this could be as simple as setting `root.props.style.backgroundColor` to have a value of "#000000" if you want a black background.