Html Question posted in
Some basic documentation can be found here.

Html – How to add padding to the right side of an overflowing div

If you shrink your window until the div’s are overflowing and you have to scroll, the padding on the right side disappears. Any ideas on how to add padding to the right side? I’ve tried moving the padding from .container to .flex-container, but it didn’t work.

.container {
  height: 100vh;
  overflow: scroll;
  padding: 2rem;
}

.flex-container {
  display: flex;
  gap: 0.5rem;
}

.card {
  width: 150px;
flex-shrink: 0;
 background: #e5e7eb;
 padding: 1rem;
 border-radius: 4px;
}

h2 {
  font-family: sans-serif;
}
<div class="container">
  <div class="flex-container">
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    If we add some borders we start to get a clue why this is happening. The padding inside the element with the lime border affects the position of the element with the red border, but not the overflowing contents of that element.

    .container {
  padding: 2rem;
  overflow: auto;
  border: 1px solid lime;
}

.flex-container {
  display: flex;
  gap: 0.5rem;
  border: 1px solid red;
}

.card {
  width: 150px;
  flex-shrink: 0;
  background: #e5e7eb;
  padding: 1rem;
  border-radius: 4px;
}

h2 {
  font-family: sans-serif;
}
    <div class="container">
  <div class="flex-container">
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
  </div>
</div>

    It’s really the inner container which needs to manage the overflow, not the outer container. If we move the overflow style to the inner container, the problem is resolved:

    .container {
  padding: 2rem;
  border: 1px solid lime;
}

.flex-container {
  display: flex;
  gap: 0.5rem;
  overflow: auto;
  border: 1px solid red;
}

.card {
  width: 150px;
  flex-shrink: 0;
  background: #e5e7eb;
  padding: 1rem;
  border-radius: 4px;
}

h2 {
  font-family: sans-serif;
}
    <div class="container">
  <div class="flex-container">
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
  </div>
</div>

    Or simply combine the two wrappers into one, and it works too:

    .container {
  overflow: auto;
  padding: 2rem;
  display: flex;
  gap: 0.5rem;
  border: 1px solid red;
}

.card {
  width: 150px;
  flex-shrink: 0;
  background: #e5e7eb;
  padding: 1rem;
  border-radius: 4px;
}

h2 {
  font-family: sans-serif;
}
    <div class="container">
  <div class="card">
    <h2>Test1</h2>
  </div>
  <div class="card">
    <h2>Test1</h2>
  </div>
  <div class="card">
    <h2>Test1</h2>
  </div>
  <div class="card">
    <h2>Test1</h2>
  </div>
  <div class="card">
    <h2>Test1</h2>
  </div>
  <div class="card">
    <h2>Test1</h2>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Hope this solves your problem, below are very simple steps:

    1 – I have hidden the overflow of the parent div, so that the padding remains the same with the parent div.

    2 – Also added overflow to child div so it can be scrolled.

    .container {
  height: 100vh;
  overflow: hidden;
  padding: 2rem;
}

.flex-container {
  display: flex;
  gap: 0.5rem;
  overflow: scroll;
}

.card {
  width: 150px;
  flex-shrink: 0;
  background: #e5e7eb;
  padding: 1rem;
  border-radius: 4px;
}

h2 {
  font-family: sans-serif;
}
    <div class="container">
  <div class="flex-container">
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
    <div class="card">
      <h2>Test1</h2>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search