CSS Layout Overflow Scroll only in Div

Question

I can't seem to get this page layout to work for me. I want the yellow div to be scrollable, however not show past the red div. Setting the page overflow to hidden disables scrolling altogether.

Edit: To clarify, I want the orange highlight to cover the full width in the overflow.

.page {
  background-color: aqua;
  padding: 0 32px;
  height: 300px;
}

.layout {
  background-color: red;
  margin: 0 32px;
  padding: 16px 32px;
  height: 200px;
}

.container {
  background-color: yellow;
  margin: 0 -32px;
  padding: 16px 32px;
  
  white-space: nowrap;
  overflow: scroll;
  display: inline-block;
}

.highlight {
  background-color: orange;
  margin: 0 -32px;
  padding: 0 32px;
}

<div class="page">
  <div class="layout">
    <p>
      Some Text
    </p>
    <div class="container">
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="highlight">
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
      </div>
    </div>
  </div>
</div>

Another edit: A big factor for my struggle and confusion was that I'm using tailwind and tailwind applies this css rule on the base:

*,
::before,
::after {
  box-sizing: border-box;
}

This had the effect that the yellow box was always too short.. Adding

.container {
  /* ... */
  box-sizing: content-box;
}

did the trick

the container has not a defined width or height. as such the width and height will be calculated to fit-content. An overflow only can occure if the height/width of the container is smaller then the content. — tacoshy
– tacoshy, Commented Mar 7, 2022 at 15:13

tacoshy · Accepted Answer · 2022-03-07 15:21:46Z

2

The container has not a defined width or height. as such the width and height will be calculated to fit-content. An overflow only can occure if the height/width of the container is smaller then the content.

To fix your issue you just need to add width: 100% to the container to fill out the parents width.

.page {
  background-color: aqua;
  padding: 0 32px;
  height: 300px;
}

.layout {
  background-color: red;
  margin: 0 32px;
  padding: 16px 32px;
  height: 200px;
}

.container {
  background-color: yellow;
  margin: 0 -32px;
  padding: 16px 32px;
  
  white-space: nowrap;
  overflow: scroll;
  display: inline-block;
  width: 100%;
}

.highlight {
  background-color: orange;
  margin: 0 -32px;
  padding: 0 32px;
  width: fit-content;
}

<div class="page">
  <div class="layout">
    <p>
      Some Text
    </p>
    <div class="container">
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="row">Testline1</div>
      <div class="highlight">
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
        Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow Overflow
      </div>
    </div>
  </div>
</div>

edited Mar 7, 2022 at 15:21

answered Mar 7, 2022 at 15:15

tacoshy

13.3k5 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phaze Over a year ago

Thanks, maybe I should have added that I, in particular want the orange background to cover the full width!

tacoshy Over a year ago

@lain then add width: fit-content to the .highlight-class.

phaze Over a year ago

Amazing! Simple, but I spent a day fighting with this. Thanks

Collectives™ on Stack Overflow

CSS Layout Overflow Scroll only in Div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related