CODEWITHSUNDEEP
htmlcss
Ukasha
Ukasha

Reputation: 2334

The right padding disappears when the container is scrollable

Well, the title is self-explanatory. Thanks in advance :)

.parent {
  background-color: blue;
  width: 120px;
  height: 150px;
  overflow: auto;
  padding: 20px;
}

.child {
  background-color: red;
  width: 200px;
  height: 200px;
}
<div class="parent">
  <div class="child">
  </div>
</div>

Upvotes: 1

Views: 735

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

I have given two solutions.

1 - Use margin for the .child instead of padding the .parent.

Add these rules for .child:

margin: 20px;
display: inline-block;

And remove padding: 20px out of .parent.

.parent {
  background-color: blue;
  width: 120px;
  height: 150px;
  overflow: auto;
  /*padding: 20px;*/
}

.child {
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 20px;
  display: inline-block;
}
<div class="parent">
  <div class="child">
  </div>
</div>

2 - Add position: relative for .child. Add a set of rules with pseudo-class :after for .child:

.child:after {
  position: absolute;
  content: '';
  right: -20px;
  width: 20px;
  height: 1px;
}


.parent {
  background-color: blue;
  width: 120px;
  height: 150px;
  overflow: auto;
  padding: 20px;
}

.child {
  background-color: red;
  width: 200px;
  height: 200px;
  position: relative;
}

.child:after {
  content: '';
  position: absolute;
  right: -20px;
  width: 20px;
  height: 1px;
}
<div class="parent">
  <div class="child">
  </div>
</div>

Upvotes: 1

Bjorn.B
Bjorn.B

Reputation: 1705

Because you are explicitly setting the width of the child element, which is the larger than parent, it overflows outside of parent. You can set the child to a percentage which will take up a percentage of the parent while respecting the padding of parent.

.parent {
  background-color: blue;
  width: 120px;
  height: 150px;
  overflow: auto;
  /* padding: 20px; */
  margin: 20px;
}

.child {
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 20px;
  display: inline-block;
}
<div class="parent">
  <div class="child">
    
  </div>
</div>

Upvotes: 1

Related Questions