0

Trying to have a container div display an horizontal scrollbar when its child is too long. Instead, the container div itself overflows its parent.

Here is my code:

.root {
  background-color: blue;
  padding: 5px;
  display: flex;
}

.left {
  background-color: yellow;
  flex: 0 0 auto;
  width: 60px;
}

.right {
  background-color: green;
  padding: 5px;
}

.container {
  overflow-x: scroll;
}

.content {
  background-color: red;
  width: 900px;
  height: 100px;
}
<div class="root">
  <div class="left">
  </div>
  <div class="right">
    <span>Hello World</span>
    <div class="container">
      <div class="content">
      </div>
    </div>
  </div>
</div>

Ideally, the green div would not overflow it's parent (the blue div) nor have a scrollbar. The horizontal scrollbar should appear in the container class div.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Gabriel Cote
  • 33
  • 4
  • add `min-width:0` to right element – Temani Afif Sep 20 '18 at 22:20
  • Hi Gabriel, welcome to SO! I'd really like for you to get an answer to your question, one thing that has helped many in the past: Providing context around what you have tried / what you've learned trying to solve the issue. – sheeldotme Sep 20 '18 at 22:20
  • @seeldotme thanks, already got an answer :) but will keep it in mind next time. – Gabriel Cote Sep 21 '18 at 16:46

1 Answers1

0

Simply add overflow: hidden to .right:

.right {
  background-color: green;
  padding: 5px;
  overflow: hidden
}

This will ensure that the red box doesn't overflow its parent and will allow scrolling within it.

Adam
  • 3,829
  • 1
  • 21
  • 31