我想创建一个网页,其中包含一个使用 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>
最佳答案
如果您将 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>
关于html - 如何使用 css flexbox 创建水平滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52507273/