1

I have the following layout defined with flexbox. I'd like for the buttons on the right to be placed inside a horizontal scrolling element: enter image description here

However, as I add addition buttons, rather than scrolling, the container expands:

enter image description here

The code is defined as:

<div class="container">
  <main>
  </main>

  <aside>
    <section>
        <button>button 1</button>
        <button>button 2</button>
        <button>button 3</button>

        <!-- adding additional buttons causes the container to expand in width rather than scroll -->
        <!--
        <button>button 4</button>
        <button>button 5</button>
        -->
    </section>

  </aside>
</div>

CSS (SCSS):

.container {
  display: flex;
  flex-direction: row;
  height: 90vh;

  main {
    background: lightblue;
    flex: 0 0 40vw;
  }
}

aside {
  background: lightcoral;
  flex: 0 0 40vw;

  section {
    display: flex;
    overflow-x: scroll;

    button {
      width: 150px;
      height: 20px;
    }
  }
}

Here's a jsfiddle demo of the issue:

https://jsfiddle.net/omcnq8yv/117/

Mark Nguyen
  • 7,168
  • 9
  • 31
  • 41
  • 1
    I mean, you can just put a max-width on your `aside` and stop the buttons from shrinking, although to be honest, I don't know that this is a great use case for flexbox, since it's whole benefit is, well, flexing things. But anyways, here you go... [JSFiddle](https://jsfiddle.net/g0a3p8do/19/) – Jake Apr 10 '23 at 22:05
  • 1
    Add `min-width: 0` to the `aside` element ([revised demo](https://jsfiddle.net/em28nfbr/)). Explained in the duplicate. – Michael Benjamin Apr 11 '23 at 03:27

0 Answers0