# Tab Container CSS - Full Screen Width

**URL:** <https://community.glideapps.com/t/tab-container-css-full-screen-width/82563>\
**Category:** Ask for Help\
**Created:** [June 17, 2025, 9:12pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563 "2025-06-17T21:12:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thais\_Fontes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thais_fontes/32/61251_2.png) [@Thais\_Fontes](https://community.glideapps.com/u/Thais_Fontes)\
**Post date:** [June 17, 2025, 9:12pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/1 "2025-06-17T21:12:41Z")

</div>

Hello,

I would like to have my tab container and all components on it (table collection) to be full width.

I have applied the below CSS, but it’s not working.

```auto
.tab-container div[class*="wire-container___StyledDiv2-sc-1scc3f6-1"] { 
 max-width: 100vw;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfcc583747ce945740541bf2d163039cb5465be8.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/04afcb77a12b10ddefb4e714c7a0161f8ad1cfcf.png)

---

<div class="post-metadata">

**Author:** ![Thais\_Fontes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thais_fontes/32/61251_2.png) [@Thais\_Fontes](https://community.glideapps.com/u/Thais_Fontes)\
**Post date:** [June 17, 2025, 9:47pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/2 "2025-06-17T21:47:15Z")

</div>

I was able to do the tab full screen, but then it is now breaking the table

```auto
.tab-container, 
.tab-container * {
  box-sizing: border-box !important;
}

.tab-container div
{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b78dcbaf242da61c7a29af3b79f9e36f5f923e6a.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 17, 2025, 9:51pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/3 "2025-06-17T21:51:57Z")

</div>

I’m away from my computer right now, but you could try this CSS. Others might have suggestions too.

```auto
div[class*="section-container"] >div {
max-width: 100vw;
}

div[class*="container-padding-md"] {
max-width: 100vw;
}

div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"]{
max-width: 100vw;
}

```

---

<div class="post-metadata">

**Author:** ![Thais\_Fontes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thais_fontes/32/61251_2.png) [@Thais\_Fontes](https://community.glideapps.com/u/Thais_Fontes)\
**Post date:** [June 17, 2025, 9:58pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/5 "2025-06-17T21:58:35Z")

</div>

It has not worked for the tab container or the table

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/105021a87d49138f9a250ddff985bd9643ad34f5.png)

---

<div class="post-metadata">

**Author:** ![Thais\_Fontes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thais_fontes/32/61251_2.png) [@Thais\_Fontes](https://community.glideapps.com/u/Thais_Fontes)\
**Post date:** [June 17, 2025, 10:03pm UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/6 "2025-06-17T22:03:29Z")

</div>

I found one that works!

```auto
/* 1️⃣ Tabs container: edge-to-edge */
.tab-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 2️⃣ Direct child wrappers: edge-to-edge */
.tab-container > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 3️⃣ The table-container: edge-to-edge */
.table-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 4️⃣ The direct child grid inside the table-container: force it wide */
.table-container > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* DO NOT force display:block: this can break flex layout! */
}

/* 5️⃣ Prevent body horizontal scroll */
body {
  overflow-x: hidden !important;
}

```

---

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [June 19, 2025, 7:43am UTC](https://community.glideapps.com/t/tab-container-css-full-screen-width/82563/7 "2025-06-19T07:43:32Z")

</div>

I hate the table scroll bar.. so in many of my apps i use this short css and it works fine

put your table in a container and give the container the class **cont-wide**

.cont-wide div[class\*=“StyledDiv5”][class\*=“pages-component-renderer”] {  
max-width: 1400px;  
}

here is how it looks - it works for custom collections as well.

 ![Screenshot 2025-06-19 at 10.41.26 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92a692b81d9dc28d7740a7cbc2380aa96ae02d12.jpeg)