CSS overflow scroll and visible at same time

Question

I have scrollable div with child div. Is there any way to show whole child (also outside of scrollable div)? Now, overflow-x: scroll is like overflow-x: hidden with scrollbar. I would like overflow-x: visible with scrollbar. Here is fiddle.

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
}

.containerExample {
  background-image: linear-gradient(to left, blue, green);
  margin: 0 auto;
  overflow-x: visible;
  width: 600px;
}

.childExample {
  border: 1px solid red;
  height: 100px;
  margin: 0 auto;
  width: 300px;
}

Now:

<div class="container">
<div class="child">

</div>
</div>

What I want (red border should be scrollable div):

<div class="containerExample">
<div class="childExample">

</div>
</div>

Answer 1

You could use some js here to clone the child element and then use scroll event on the container to calculate the horizontal scroll and use the same value to offset the position of the cloned element.

const container = $(".container")
const child = container.find('.child');
const clone = child.clone();
const border = 4;

clone.addClass('clone');
child.addClass('transparent');
container.css('border-width', border);
container.before(clone)

$(".container").on('scroll', function() {
  const offset = $(this).scrollLeft() - border;
  clone.css({
    left: -offset
  })
})

body {
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
  border: solid red;
  z-index: 10;
}

.wrapper {
  margin: 0 auto;
  width: 300px;
  position: relative;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
  position: relative;
}

.clone {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
}

.transparent {
  background: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="child"></div>
  </div>
</div>