CSS overflow scroller crops background color

Question

I am creating a web and need to make a scroller appear. I tried using overflow: auto, but then other problem appeared. Here is a simple example of my problem. I have outer div with property overflow: auto and component in angular4 (or in other words another div) that has new background color. When scroller appears and I scroll to right background color disappears. How to have scroller and background color to stay?

.outer {

    width: 110px;
    height: 110px;
    border: thin solid black;
    overflow: auto;
    background: red;
}
.inner{
background:Yellow;

}

<div class="outer">
  <div class="inner">
    <p>
 Scroll to right -> ********************************************
    </p>
  </div>
</div>

MJ.Noori · Accepted Answer · 2018-02-03 20:45:30Z

5

add this: width: fit-content;

.outer {
  width: 110px;
  height: 110px;
  border: thin solid black;
  overflow: auto;
  background: red;
}

.inner {
  background: Yellow;
  width: fit-content;
}

<div class="outer">
  <div class="inner">
    <p>
      Scroll to right -> ********************************************
    </p>
  </div>
</div>

answered Feb 3, 2018 at 20:45

MJ.Noori

1,23713 silver badges23 bronze badges

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

Comments

Stickers · Accepted Answer · 2018-02-03 20:25:57Z

1

You can set the inner div to display: inline-block;, so that the width won't get limited by the container's width. Also add min-width: 100%; as needed.

.outer {
  width: 110px;
  height: 110px;
  border: thin solid black;
  overflow: auto;
  background: red;
}

.inner {
  background: yellow;
  display: inline-block;
}

.inner p {
  margin: 0;
}

<div class="outer">
  <div class="inner">
    <p>
      Scroll to right -> ********************************************
    </p>
  </div>
</div>

answered Feb 3, 2018 at 20:25

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Collectives™ on Stack Overflow

CSS overflow scroller crops background color

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related