CODEWITHSUNDEEP
cssflexboxoverflow
swingthrough
swingthrough

Reputation: 67

Stretch flex item with overflowing content to the full available width of its container

I have a layout like this:

HTML:

<html>
  <head>
  </head>
  <body>
    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

CSS:

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 900px;
  overflow-x: scroll;

}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}

Also on codepen.

Table inside the table-container is wider so I want to have overflow-x: scroll. The thing is, right now table-container class has width specified with pixels, width: 900px. That works nice but I would like it to stretch to the full available width of the div with class dashboard. However if I add width: 100% to table-container, it destroys the layout and stretches outside of the div with dashboard class along with all the other sibling divs.

Items stretch outside of the container

It seems like the fix should be simple but so far I haven't been successful.

Upvotes: 2

Views: 2223

Answers (1)

Mihai T
Mihai T

Reputation: 17687

Your idea to use width:100% on table-container is correct. But also use overflow: hidden ( or overflow-x ) on the right-container so the layout isn't modified.

I hope i understood correctly what you wanted. Please check the snippet below.

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow:hidden;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 100%;
  overflow-x: scroll;
  
}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}
    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>

Upvotes: 1

Related Questions