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>

Answer 1

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>

Answer 2

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>

Answer 3

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>