CODEWITHSUNDEEP
htmlcssangular
LoverKiss
LoverKiss

Reputation: 69

CSS overflow scroller crops background color

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>

Upvotes: 3

Views: 1249

Answers (2)

Mohammad Javad Noori
Mohammad Javad Noori

Reputation: 1217

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>

Upvotes: 4

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 1

Related Questions