I’m building a carousel inside a flex container which has flex-direction: column. I thought this would be trivial, and it probably is. I’ve built carousels by hand before but not in this exact circumstance.

My problem is that the content is a carousel, a scrolling list of items that is in a parent with overflow: hidden, but its size is not being constrained by its flex item parent so it is occupying the full width of all its child items. Normally a parent like that has its size constrained in some way, causing it to be smaller than its content, a very common design pattern.

Consider this snippet, with two columns in the outer layout, a Left panel (yellow) wants to be 30% width and Right panel (green) wants to be 60% width. Inside the left panel, I want a carousel, which contains many items.

.container {
  display: flex;
}

.left-panel {
  flex: 0 0 33%;
  display: flex;
  flex-direction: column;
  background-color: yellow;
}
.right-panel {
  flex: 1 0 auto;
  flex-basis: 66%;
  background-color: green;
}

.items {
  flex: 1;
  overflow-x: hidden;
}

.items-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}

.item {
  width: 8rem;
  height: 8rem;
  background-color: red;
}

<div class="container">
  <div class="left-panel">
    <div class="title">Left Panel, this panel is supposed to be only 30% the width of the parent, but is being pushed wider by the children below.</div>
    <p>I want the .items div to be the same width as the 33% wide .left-panel, and I'll deal with the scroll/overflow once that is working.</p>

    <div class="items">
      <div class="items-wrapper">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
  </div>
  
  <div class="right-panel">
    Right Panel Here
  </div>
</div>

See equivalent codepen https://codepen.io/neekfenwick/pen/QWRQrVL

I’ve told the left panel to be flex: 0 0 33% which I thought would force it to be 33% the width of its parent (the document), since flex-grow is 0 and flex-basis is 33%, and any content inside would be sized accordingly.

I understand that the content is physically larger than this requested 33%. How can I make the .items element respect the size requested by its parent?

Perhaps what’s tripping me up is that the .left-panel has flex-direction: column which means the main axis is vertical, so the effect of flex-basis, flex-grow etc becomes confusing, but the flex axis of the outer .container is the default row so I can’t narrow down what’s going wrong.

I’ve found advice at Overflow and contain flex-child of a flex-child advising flex-basis: 0 which doesn’t help.

This is not helped by having a bit of a stinker of a cold right now. Help would be hugely appreciated 🙂