0

I have a page layout based on flex, and I'm wanting to insert a scrollable pane of items into the .main container. But the .scroller isn't being restricted by the parent. Is there a way to get the overflow-x: auto scrollbar to appear?

article {
  display: flex;
  max-width: 800px;
  outline: 1px red solid;
}

.menu {
  flex: 0 0 200px;
}

.main {
  flex: 1 1 auto;
  outline: 1px green solid;
}

.scroller {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: no-wrap;
  overflow-x: auto;
}

.scroller li {
  margin: 0 6px;
}

// other styles

ul {
  margin: 0;
  padding: 0;
  list-style: none; 
}

li {
  margin: 0;
  padding: 0;
}
<article>
  <ul class="menu">
    <li>Link 1</li>
    <li>Link 2</li>
  </ul>
  <section class="main">
    <h1>Page contents</h1>
    
    <h2>Slideshow</h2>
    <ul class="scroller">
      <li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
      <li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
      <li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
    </ul>
  </section>
</article>

CodePen link

cloakedninjas
  • 4,007
  • 2
  • 31
  • 45

1 Answers1

0

overflow-x: auto; needs to go on main, not scroller

Tree Frog
  • 637
  • 5
  • 12
  • Nope, I only want the `.scroller` to get scrollbars. But no matter - Temani located the solution... `min-width: 0;` on `.main` – cloakedninjas Mar 20 '19 at 12:08