# \[IGN-1831\]Tab Container Tab Width

**URL:** <https://forum.inductiveautomation.com/t/ign-1831-tab-container-tab-width/52071>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 18, 2021, 6:42pm UTC](https://forum.inductiveautomation.com/t/ign-1831-tab-container-tab-width/52071 "2021-10-18T18:42:35Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 27, 2022, 8:59am UTC](https://forum.inductiveautomation.com/t/ign-1831-tab-container-tab-width/52071/5 "2022-01-27T08:59:09Z")

</div>

here ya go:

Seems you might also want to overwrite the flex basis; (i advice to auto)

the default theme.css:  
`[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 2rem; max-width: 10rem; flex: 0 1 96px !important;}`

with injection you can get it like this (paste into style class background image prop with }{ around the css):  
`}[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 2rem; max-width: 10rem; flex: 0 1 96px !important;}{`

I’ve also set the min a bit higher here so you can see:  
`}[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 1 auto !important; }{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e0269acf364a01911a7ca05ec08b9ea5c1841db.png)

---

_[View the full topic](https://forum.inductiveautomation.com/t/ign-1831-tab-container-tab-width/52071)._