# Components inside Flex Container won't stretch **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 1, 2024, 4:24pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639 "2024-07-01T16:24:07Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![cchang](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@cchang](https://forum.inductiveautomation.com/u/cchang)\ **Post date:** [July 1, 2024, 4:24pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/1 "2024-07-01T16:24:07Z")
I'm not sure what started causing this issue, but the components inside my flex containers won't stretch completely. Below, I have a label component inside a column flex container. The 'alignItems' and 'alignContent' properties in the flex container's root are both set to stretch. Another thing I noticed is when I set grow to 1 on the label, it doesn't grow all the way vertically. It's almost as if there is a padding/margin of about 15px on the right edge and the bottom edge. But there are no paddings or margins configured at all on the container and the label. Has anyone else had this issue before? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/37892239a244c9d2d7c09c74f49a12cc8c796340.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/78d78b5ad28a216d749d0d457a6a7a47edd5418a.png) ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [July 1, 2024, 4:39pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/2 "2024-07-01T16:39:30Z")
Margin or padding configured for the label's style? ---
**Author:** ![cchang](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@cchang](https://forum.inductiveautomation.com/u/cchang)\ **Post date:** [July 1, 2024, 4:42pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/3 "2024-07-01T16:42:19Z")
No. I haven't changed any of the configurations. The flex container's root also does not have any margins or paddings configured. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/71f1b2d708044dbb5a06e015d5c37128393e9867.png) ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [July 1, 2024, 4:55pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/4 "2024-07-01T16:55:31Z")
What type of view is this in? What are the props for it? ---
**Author:** ![cchang](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@cchang](https://forum.inductiveautomation.com/u/cchang)\ **Post date:** [July 1, 2024, 7:01pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/5 "2024-07-01T19:01:13Z")
This is in a Flex Container. I attached a screenshot of both the view properties and the container's root properties. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/afcc8d6258859e6ed5c375106e5565c5692962f7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/102072b210e9295e6f563bf609045e262a7b6b2a.png) ---
**Author:** ![benp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benp/32/34073_2.png) [@benp](https://forum.inductiveautomation.com/u/benp)\ **Post date:** [July 1, 2024, 7:50pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/6 "2024-07-01T19:50:54Z")
You must have a margin, padding or gap in there somewhere or some other css style causing this. Have you tried inspecting your component on the web browser with ctrl+shift+i? You should have an icon allowing you to select an element of you page and inspect its html and css like I've done here on the forum. It will also highlight with a color the margins an paddings of the element. You could also try to remove any style you have on all those components or create it again in a new view to see if you're getting the same result. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/9/99b151ad1f55bc1370000b95d838976cfd329f3f.png) ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [July 1, 2024, 8:08pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/7 "2024-07-01T20:08:02Z")
Have you used the Advanced Stylesheet feature or CSS "injection" before? There was probably some unintentional styling by not being specific enough in your selection. To test this, create a new view and replicate the setup. Also, create a Row Flex Container and drop a label in that one (with the same settings as above) and see if its the same. That should give you an idea of where the custom CSS is likely defined. ---
**Author:** ![cchang](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@cchang](https://forum.inductiveautomation.com/u/cchang)\ **Post date:** [July 1, 2024, 8:13pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/8 "2024-07-01T20:13:31Z")
I think this is what you are referring to (Correct me if I'm wrong). But the purple shaded region I think is the flex container. You can see that there is still a small margin/padding being created on the right and bottom edge (in green). And unless I'm looking at the script incorrectly, I don't think there is a margin or padding on both the flex container and the label in css. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d6cc45db5f4b37084c223823b51881890aed41b8.jpeg) ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [July 1, 2024, 8:19pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/9 "2024-07-01T20:19:22Z")
That looks like the correct element is selected. Can you scroll down in the styles pane on the right and show more of the styles there? You have a custom theme (`light-TGMS.css`) so there may be styles further down. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/4210a8866f418d6df5a6745560c66c08bf1d2903.jpeg) ---
**Author:** ![cchang](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@cchang](https://forum.inductiveautomation.com/u/cchang)\ **Post date:** [July 1, 2024, 8:28pm UTC](https://forum.inductiveautomation.com/t/components-inside-flex-container-wont-stretch/92639/10 "2024-07-01T20:28:07Z")
I actually found what was creating those margins. I had 'overflow' set to scroll in the root container. (You can see it in one of the screenshots from earlier) I guess when overflow was set to scroll, the view/component automatically created margins to account for a scroll bar being there even though the scroll bar was not present. I don't know the fine details of how the scrollbar affects the view's styling but I removed overflow and it fixed the issue.