Search code examples
cssflexboxhorizontal-scrolling

overflow-x in flexbox enabled element not allowing scroll

I know there are questions very similar to and possibly duplicates of this question, but applying those learnings still hasn't been able to get this 100% working. Some answers fix one part, some the other part, but I've not been able to figure out a full solution.

I have a layout that I arranged using flexbox settings. I want a main work area, a control panel on the right side, and a dock on the bottom that will horizontally scroll to show a dynamic number of items. I have a mock up in a codepen:

layout

I have the major sections laid out here:

<div class="layout">
  
  <div class="workspace">
    <div class="animation-frame"></div>
    <div class="dock">
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
  </div>
  <div class="controls">
  </div>
  
  </div>

And styled here:

html,body{margin:0;padding:0;height:100vh;width:100vw;}

.box  {
  flex-basis: 100px;
  width:100px;
  height: 100px;
  min-width:100px;
  min-height: 100px;
  background: black;
  margin:5px;
}

.layout {
  display:flex;
  height: 100%;
  background:lightblue;
}

.workspace {
  background: lightgray;
  flex: 1;
  display: flex;
  flex-direction:column;
}

.animation-frame {
  background: cyan;
  flex:1;
}

.dock {
  background: green;
  height:120px;
  display:flex;
  overflow-y: hidden;
  overflow-x: scroll;
}

.controls {
  background: orangered;
  width:120px;
}

The problem that I'm running into is that when I try to set the "dock" with the property overflow-x: scroll the content still stretches the container:

enter image description here

I know if I force the width on the dock I can get the overflow to work:

hard coded

But then I lose the resizing flexibility that flexbox was giving me.

Is there a way to get both the dynamic horizontal size while still allowing for the horizontal scrolling?

Solution

  • If your controls will have that 120 px width this might be what you're looking for

    html,body{margin:0;padding:0;height:100vh;width:100vw;}

.box  {
  flex-basis: 100px;
  width:100px;
  height: 100px;
  min-width:100px;
  min-height: 100px;
  background: black;
  margin:5px;
}

.layout {
  display:flex;
  height: 100%;
  background:lightblue;
}

.workspace {
  background: lightgray;
  flex: 1;
  display: flex;
  flex-direction:column;
}

.animation-frame {
  background: cyan;
  flex:1;
}

.dock {
  background: green;
  height:120px;
  display:flex;
  overflow-y: hidden;
  overflow-x: scroll;
  /* This line was the only change*/
  width: calc(100vw - 120px);
}

.controls {
  background: orangered;
  width:120px;
}
    <div class="layout">
  
  <div class="workspace">
    <div class="animation-frame"></div>
    <div class="dock">
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
        <div class='box'></div>
    </div>
  </div>
  <div class="controls">
  </div>
  
  </div>