How to allow list positioned absolute, to break out of fixed element?

Question

http://codepen.io/leongaban/pen/ZGywrV?editors=110

I have a list which items will be scrollable left and right inside of a column. However the column has a position of fixed, which is not letting my items break out of the tag-column div.

Currently it looks like this:

I want it to look like this:

So then I can add overflow-x: hidden, then add a scrolling button to scroll the items left and right.

Markup

<!-- position: fixed -->
<div class="tag-col">

  <header>
    <!-- position: absolute -->
    <!-- This needs to break out of column -->
    <div class="carousel">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
    </div>
  </header>

</div>

Styling

ul > li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.tag-col {
  position: fixed;
  display: block;
  width: 120px;
  height: 500px;
  background: cyan;
}

.carousel {
  position: absolute;
  li {
    float: left;
  }
}

Is there a way to do this with tag-col being position:fixed?

Answer 1

You can break the li elements out of the column by giving the ul a width:

.carousel ul {
  width: 300px;
}

You can see this in action in a forked codepen. (Added some borders and spacing to make it easier to see what's going on.)

Hope that helps. Good luck!