How to create horizontal scroll using css flexbox?

Miller

New Member
#1
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:
Mã:
.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;
}
Mã:
<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>
 

Admin

Administrator
Thành viên BQT
#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
Mã:
.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;
}
Mã:
<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>
 
Top