How to create horizontal scroll using css flexbox?

Question

I would like to create a webpage with a section that scrolls horizontally using flexbox. However, the code results in each box being reduced in size to fit the screen, rather than overflowing and enabling for horizontal scrolling.

Code:

.main {
  flex-direction: row;
  -webkit-flex-direction: row;
  overflow: scroll;
  width: 100%;
  height: 100vh;
}

.portfolio_item {
  width: 50%;
}

.flex {
  display: flex !important;
  display: -webkit-flex !important;
}

<div class="main flex">
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
</div>

Instead of putting your .main to 100%, you can go higher than that, try a value like 200% or 250% — Vic Segers
– Vic Segers, Commented Sep 25, 2018 at 22:11

Rachel Gallen · Accepted Answer · 2018-09-25 22:26:47Z

6

If you add a min-width of 50% (as well as the width of 50%) to your child portfolio items, your code works (with overflow and scrolling).

Hope this helps

.main {
  flex-direction: row;
  -webkit-flex-direction: row;
  overflow: scroll;
  width: 100%;
  height: 100vh;
}

.portfolio_item {  
  min-width: 50%;
  width:50%;
}

.flex {
  display: flex;
  display: -webkit-flex;
}

<div class="main flex">
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
</div>

answered Sep 25, 2018 at 22:26

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rachel Gallen Over a year ago

I concur with @MaximillianLaumeister on this one however, flex is probably not the ideal choice if this is the desired output

A.Broderick · Accepted Answer · 2018-09-25 22:21:39Z

Not sure if using flex is necessary, since flex is to help avoid the overflow situation amongst other things.

Here is a very simple example without flexbox utilising the overflow-x: scroll; and white-space: nowrap; attributes. The first allows the div to be scrollable, and the second prevents white space from wrapping around to a new line

.container {
	overflow-x: scroll;
	white-space: nowrap;
}

.box {
	display: inline-block;
	border: 1px solid black;
	margin: 5px;
	height: 200px;
	width: 200px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css">
  <title></title>
</head>
<body>
	<div class="container">
		<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>
</body>
</html>

Maximillian Laumeister · Accepted Answer · 2018-09-25 22:39:00Z

2

I'm not sure flexbox is actually the tool for this job. The premise behind flexbox is that your elements flex to fit inside the box. However, you specifically want them to overflow your box, not fill the available space in your box.

From css-tricks.com:

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space [...] A flex container expands items to fill available free space, or shrinks them to prevent overflow.

It might make more sense to enable horizontal scrolling by using a layout based on inline-block and white-space: nowrap like this:

.main {
  overflow-x: auto;
  white-space: nowrap;
}

.portfolio_item {
  display: inline-block;
  margin: 0 30px;
}

<div class="main">
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item willow">
    <a class="link" href="https://aubergewillowinn.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Willow Inn</h3>
      </div>
    </a>
  </div>
  <div class="portfolio_item bellevue">
    <a class="link" href="http://www.bellevuemtl.com/">
      <div class="filter flex">
        <h3 class="portfolio_item-text">Bellevue Condominiums</h3>
      </div>
    </a>
  </div>
</div>

edited Sep 25, 2018 at 22:39

answered Sep 25, 2018 at 22:15

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

4 Comments

Tim Over a year ago

Maybe change 'overflow' to 'overflow-x'. In some browsers, you automatically get a scrollbar both horizontal and vertical if you set 'overflow: scroll'.

Maximillian Laumeister Over a year ago

@Tim Good idea, and done. I also changed it to auto so the scrollbars only show up when needed.

JSON_Derulo Over a year ago

@MaximillianLaumeister I like using flexbox because it simplifies changing from mobile view where everything stacks vertically to desktop view.

Maximillian Laumeister Over a year ago

@S.Miller I appreciate that, but in this case your code is going to be simpler and less hacky if you don't use flexbox. It's just not built for what you're trying to do here. To accommodate all screen sizes, I might recommend making a media query that switches between the inline-block and flex layouts depending on the width of the screen.

Collectives™ on Stack Overflow

How to create horizontal scroll using css flexbox?

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related