CSS for scrolling breadcrumb

Question

I'm looking for creating something like this: Material design BreadCrumb

I'm stuck with the CSS. The specifications says that the object itself (the first item on the list) should has the offset 72px from the left, and that the rest of the list items should be positioned to the left of this item, and scroll as you see in the attached image.

I can't make the list scroll properly,but when I try to absolutely position something to the left, it wont scroll, if i do it to the right, it scrolls.

My HTML code is like:

<nav>
  <ol>
    <li><a>Object</a></li>
    <li><a>Parent 1</a></li>
    <li><a>Parent 2</a></li>
    <li><a>Parent 3</a></li>
    <li><a>Parent 4</a></li>
    ....
  </ol>
</nav>

Answer 1

Make 2 block 1 inside main block, inside block put overflow-x:auto and main div(block) as parent div set height and overflow:hidden. you got same output as you showing on link.

.breadcrumb {
  width:100%;
  height:20px;
  overflow:hidden;
}
.insidescroll{
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom:15px;
}

<div class="breadcrumb">
  <div class="insidescroll">
  <a href="#">Link #1</a>
  <a href="#">Link #2</a>
  <a href="#">Link #3</a>
  <a href="#">Link #4</a>
  <a href="#">Link #5</a>
  <a href="#">Link #6</a>
  <a href="#">Link #7</a>
  <a href="#">Link #8</a>
  <a href="#">Link #9</a>
  <a href="#">Link #10</a>
  <a href="#">Link #11</a>
  <a href="#">Link #12</a>
  </div>
</div>