Creating a flexbox that will horizontally scroll on overflow without overflowing the page

Question

I have a page with a side navigation bar and content on the right.

Inside the content, I have a carousel with images that I want to horizontally scroll on overflow.

Below is an example:

body {
  height: 100%;
}

.container {
  display: flex;
  height: 100%
}

nav {
  border: 1px solid black;
}

article {
  border: 1px solid black;
  width: 100%;
  display: flex;
}

.content {
  overflow: hidden;
}

.carousel {
  flex-wrap: nowrap;
  display: flex;
  overflow: auto;
  width: auto;
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: inline-block;
  flex-shrink: 0;
}

<div class="container">
  <nav>
    <ul>
      <li>This</li>
      <li>is</li>
      <li>the</li>
      <li>side</li>
      <li>navigation</li>
      <li>bar</li>
    </ul>
  </nav>
  <article>
    <div class="content">

    This is the main content
    
    <div class="carousel">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
    </div>
    </div>
  </article>
</div>

As you can see, it horizontally scrolls, but it goes beyond the right edge of the page. How can I fix this so that only the carousel scrolls horizontally, but the whole page doesn't scroll?

you need `flex: 1; min-width: 0;` to article, no need calc or specific values — Temani Afif, Jul 09 '21 at 08:30

Abin Thaha · Accepted Answer · 2021-07-09T05:10:25.733

The problem is fixed, just by specifying the width for nav and article.

The issue was you have given 100% width to the article, hence it was overflowing to the right

body {
  height: 100%;
}

.container {
  display: flex;
  height: 100%
}

nav {
  border: 1px solid black;
  width: 300px;
}

article {
  border: 1px solid black;
  width: calc(100% - 300px);
  display: flex;
}

.content {
  overflow: hidden;
}

.carousel {
  flex-wrap: nowrap;
  display: flex;
  overflow: auto;
  width: auto;
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: inline-block;
  flex-shrink: 0;
}

<div class="container">
  <nav>
    <ul>
      <li>This</li>
      <li>is</li>
      <li>the</li>
      <li>side</li>
      <li>navigation</li>
      <li>bar</li>
    </ul>
  </nav>
  <article>
    <div class="content">

    This is the main content
    
    <div class="carousel">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
    </div>
    </div>
  </article>
</div>

Thanks, but what if I want the nav to have a fixed width (say 200px) and the article to fill the rest of the page? — Peter Olson, Jul 09 '21 at 05:08
You can use `calc` to find the remaining width and assign to article — Abin Thaha, Jul 09 '21 at 05:09
I have updated the answer snippet with fixed width as 300px for the side nav — Abin Thaha, Jul 09 '21 at 05:10

Creating a flexbox that will horizontally scroll on overflow without overflowing the page

1 Answers1