CODEWITHSUNDEEP
htmlcssflexbox
doe
doe

Reputation: 455

Scroll bar not showing for element with overflow auto

Why isn't the scroll bar showing y axis for the item-container element? It doesn't display the full width for the x axis either. How can I get this element to stretch to column-2 height and width and display scroll bars for the overflow.

https://jsfiddle.net/cd83mgex/4/

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: red;
}

.column-1 {
  flex-basis: 50%;
  flex-shrink: 0;
  height: 100%;
  background: lightblue;
  border-right: 1px solid black;
}

.column-2 {
  flex: 50%;
  height: 100%;
  background: lightgreen;
}

.item-container {
  width: 100%;
  height: 100px;
  overflow: auto;
  background-color: rgba(255, 165, 0, 0.6);
}

.item {
  width: 2000px;
  height: 20px;
  background: orange;
}

html, body {
  height: 100%;
}
<div class="container">
  <div class="column-1">
    column 1
  </div>
  <div class="column-2">
    <div class="item-container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 8400

Answers (2)

Sumit Patel
Sumit Patel

Reputation: 4638

Instated of .item-container provide overflow to parent class.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: red;
}

.column-1 {
  flex-basis: 50%;
  flex-shrink: 0;
  height: 100%;
  background: lightblue;
  border-right: 1px solid black;
}

.column-2 {
  flex: 50%;
  height: 100px;
  background: lightgreen;
  overflow: auto;
}

.item-container {
  width: 100%;
  background-color: rgba(255, 165, 0, 0.6);
}

.item {
  width: 2000px;
  height: 20px;
  background: orange;
}

html,
body {
  height: 100%;
}
<div class="container">
  <div class="column-1">
    column 1
  </div>
  <div class="column-2">
    <div class="item-container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>

    </div>
  </div>
</div>

Upvotes: 0

Timothy Beamish
Timothy Beamish

Reputation: 492

.item-container is 100% as wide as it's parent: .column-2. .column-2's largest child element is .item which is 2000px and .column-2 has no width restrictions. Therefore .column-2 is at least 2000px wide.

There is a scrollbar that is automatically placed on .item-container on the far right but you might not see it because the <body> also has no width restriction so it has a scrollbar on the bottom, thus hiding most of .column-2 off screen (at least on Chrome).

Set max-width: 50% for .column-2 and it will make .column-2 actually 50% of it's parent, .container, and thus also 50% of the full body. Then you'll see scrollbars for the .item-container within the main window.

Upvotes: 3

Related Questions