Horizontal scrollbar with flex box items
-1
I have 6 images inside a container with display: flex, so the width of the container is divided on the 6 images.
I want to show 2 images and part of the 3rd, while the 3 others are next to them at the right but not shown until the user scrolls to the right.
I hide the horizontal scrollbar, but I want to keep the scrolling functions, but as shown in this fiddle, the 6 images are displayed.
How to only show 2 images and part of the 3rd with the other 3 hidden at the right next to the first 3?
Here is the code:
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>How to hide the horizontal scrollbar in this case?
html css html5 css3 flexbox
asked Nov 12 '18 at 21:22
maxwell
375
add a comment |
-1
I have 6 images inside a container with display: flex, so the width of the container is divided on the 6 images.
I want to show 2 images and part of the 3rd, while the 3 others are next to them at the right but not shown until the user scrolls to the right.
I hide the horizontal scrollbar, but I want to keep the scrolling functions, but as shown in this fiddle, the 6 images are displayed.
How to only show 2 images and part of the 3rd with the other 3 hidden at the right next to the first 3?
Here is the code:
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>How to hide the horizontal scrollbar in this case?
html css html5 css3 flexbox
asked Nov 12 '18 at 21:22
maxwell
375
add a comment |
-1
-1
-1
I have 6 images inside a container with display: flex, so the width of the container is divided on the 6 images.
I want to show 2 images and part of the 3rd, while the 3 others are next to them at the right but not shown until the user scrolls to the right.
I hide the horizontal scrollbar, but I want to keep the scrolling functions, but as shown in this fiddle, the 6 images are displayed.
How to only show 2 images and part of the 3rd with the other 3 hidden at the right next to the first 3?
Here is the code:
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>How to hide the horizontal scrollbar in this case?
html css html5 css3 flexbox
asked Nov 12 '18 at 21:22
maxwell
375
I have 6 images inside a container with display: flex, so the width of the container is divided on the 6 images.
I want to show 2 images and part of the 3rd, while the 3 others are next to them at the right but not shown until the user scrolls to the right.
I hide the horizontal scrollbar, but I want to keep the scrolling functions, but as shown in this fiddle, the 6 images are displayed.
How to only show 2 images and part of the 3rd with the other 3 hidden at the right next to the first 3?
Here is the code:
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>How to hide the horizontal scrollbar in this case?
.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>.images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>html css html5 css3 flexbox
html css html5 css3 flexbox
asked Nov 12 '18 at 21:22
maxwell
375
asked Nov 12 '18 at 21:22
maxwell
375
edited Nov 12 '18 at 22:47
asked Nov 12 '18 at 21:22
maxwell
375
asked Nov 12 '18 at 21:22
maxwell
375
asked Nov 12 '18 at 21:22
maxwell
375
375
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Tryoverflow-x: auto.
– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__galleryhasoverflow-x: scrollandoverflow-y: hidden
– maxwell
Nov 12 '18 at 22:39
add a comment |
0
Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270305%2fhorizontal-scrollbar-with-flex-box-items%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Tryoverflow-x: auto.
– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__galleryhasoverflow-x: scrollandoverflow-y: hidden
– maxwell
Nov 12 '18 at 22:39
add a comment |
2
An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Tryoverflow-x: auto.
– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__galleryhasoverflow-x: scrollandoverflow-y: hidden
– maxwell
Nov 12 '18 at 22:39
add a comment |
2
2
2
An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.
Add this to your code:
.images__gallery-item {
flex-shrink: 0;
}
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
answered Nov 12 '18 at 21:28
Michael_B
145k47231340
145k47231340
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Tryoverflow-x: auto.
– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__galleryhasoverflow-x: scrollandoverflow-y: hidden
– maxwell
Nov 12 '18 at 22:39
add a comment |
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Tryoverflow-x: auto.
– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__galleryhasoverflow-x: scrollandoverflow-y: hidden
– maxwell
Nov 12 '18 at 22:39
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 '18 at 21:46
You mean when there aren't enough items to fill the container? Try
overflow-x: auto.– Michael_B
Nov 12 '18 at 22:11
You mean when there aren't enough items to fill the container? Try
overflow-x: auto.– Michael_B
Nov 12 '18 at 22:11
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
When I scroll the scrollbar appears, I don't want it to appear at all, But still having the scrolling feature
– maxwell
Nov 12 '18 at 22:38
images__gallery has overflow-x: scroll and overflow-y: hidden– maxwell
Nov 12 '18 at 22:39
images__gallery has overflow-x: scroll and overflow-y: hidden– maxwell
Nov 12 '18 at 22:39
add a comment |
0
Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
add a comment |
0
Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
add a comment |
0
0
0
Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
Your container element needs to have a maximum width of the size you want to show, and the scroll bar on the x axis. Your image container needs to be explicitly made wider than the containing element:
.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>.sidebar__frame {
height: 100%;
max-width: 300px;
overflow-x: hidden;
}
.sidebar__block {
height: 100%;
width: 100%;
overflow-x: auto;
margin-bottom: -20px;
}
/* .images {
margin-bottom: 20px;
border-bottom: 1px solid #dae2e4;
padding-bottom: 20px;
}
*/
.images__gallery {
display: -webkit-box;
display: flex;
padding-right: 5px;
margin: -3px;
min-width: 700px;
overflow-y: hidden;
margin-bottom: -50px;
padding-bottom: 50px;
}
.images__gallery-item {
/*overflow: hidden;*/
position: relative;
padding: 1%;
flex-basis: 32%;
height: 25vw;
margin: 3px;
border: 1px solid #dae2e4;
}
.images__gallery-item img {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
}
.images__title {
line-height: 21px;
margin-bottom: 17px;
color: #707a81;
}
@media (min-width: 420px) {
.images__gallery-item {
flex-basis: 24%;
height: 20vw;
}
}
@media (min-width: 530px) {
.images__gallery-item {
flex-basis: 19%;
height: 16vw;
}
}
@media (min-width: 768px) {
.images__gallery-item {
flex-basis: 16%;
height: 12.5vw;
}
}<aside class="sidebar sidebar__frame">
<div class="images sidebar__block">
<div class="images__title">Images:</div>
<div class="images__gallery">
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/150" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/100" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/120" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/105" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/122" alt="Wikimedia">
</a>
</div>
<div class="images__gallery-item">
<a href="" target="_blank">
<img src="http://placehold.it/100/195" alt="Wikimedia">
</a>
</div>
</div>
</div>
<!-- .images-->
</aside>answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
edited Nov 12 '18 at 22:13
answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
answered Nov 12 '18 at 21:32
MichaelvE
1,1531310
1,1531310
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
add a comment |
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 '18 at 21:47
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
I guess it's a bit of a hack, but I've made the very outer container hidden on overflow, then the second container auto, and then shifted the margin in to cover the scroll bar. Hover your mouse over the images and hold shift while you scroll and it should scroll horizontally.
– MichaelvE
Nov 12 '18 at 22:16
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270305%2fhorizontal-scrollbar-with-flex-box-items%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
