时间戳

首页 > 解决方案 > 如何使用css flexbox创建水平滚动？

html - 如何使用css flexbox创建水平滚动？

问题描述

我想创建一个网页，其中的部分使用 flexbox 水平滚动。但是，代码会导致每个框的大小都缩小以适应屏幕，而不是溢出并启用水平滚动。

代码：

.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>

标签： htmlcssflexbox

解决方案

如果您将 50% 的最小宽度（以及 50% 的宽度）添加到您的子投资组合项目，您的代码将有效（溢出和滚动）。

希望这可以帮助

.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>

推荐阅读