How to include margins of child elements in a parent with overflow scroll?

user_11343591 0
Viewed 494

I have a container with a set width so its children overflow and force you to scroll. Each child element (.box) has a margin-right: 10px. The margin shows until it gets to the last element at which point it is cut off at the far right edge of the element, excluding the margin. I would like for it to show the margin for the last element, but am unable to figure out how to make this work without adding unnecessary divs to get the spacing working right, which seems like a messy solution.

The orange area should be included inside the container (red outline)

The orange area should be included inside the container (red outline)

Editable codepen here: https://codepen.io/starkana/pen/wvMjdjY

.container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 170px;
  overflow: scroll;
  padding: 0px;
}
.box {
  background: gray;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 10px !important;
  flex-shrink: 0;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

css html
1 Answers

Idea #1

The simplest thing I thought of when looking at your problem was to create another div to contain the "scrollable content". This way there is always space around the scroll section so this way it looks like it didn't get cut off.

I created a JSFiddle here, Idea #1

Code

.container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 170px;
  overflow: scroll;
  padding: 5px;
}
.scrollSection {
  display: flex;
  flex-flow: row nowrap;
  width: 170px;
  overflow: scroll;
  padding: 1px;
}
.box {
  background: gray;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 10px !important;
  flex-shrink: 0;
  /* padding-right: 10px !important; */
}
<div class="container">
<div class="scrollSection">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
</div>

Idea #2

I another way of getting around this I came across this JSFiddle

I made a version of this idea so that it could work in your use case scenario:

.container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 170px;
  overflow: scroll;
  padding: 5px;
}
.scrollSection {
  display: flex;
  flex-flow: row nowrap;
  width: 170px;
  overflow: scroll;
  padding: 1px;
}
.margin-end {
  background: blue;
  width: 10px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 0px;
  flex-shrink: 0;
  margin-left: -10px;
}
.box {
  background: gray;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 10px !important;
  flex-shrink: 0;
  /* padding-right: 10px !important; */
}
.container:nth-last-child(2) {
  margin-right: 0px !important;
  background: blue !important;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="margin-end">
  
  </div>
</div>

I also created a JSFiddle for this as well, Idea #2

user_66366380
Related