Horizontal scrollbar with flex box items

up vote
0
down vote

favorite

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?

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

add a comment |

up vote
0
down vote

favorite

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?

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

add a comment |

up vote
0
down vote

favorite

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?

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

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

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

edited Nov 12 at 22:47

asked Nov 12 at 21:22

maxwell

314

asked Nov 12 at 21:22

maxwell

314

asked Nov 12 at 21:22

maxwell

314

add a comment |

2 Answers
2

active

oldest

votes

up vote
2
down vote

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 at 21:28

Michael_B

140k43224334

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

add a comment |

up vote
0
down vote

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>

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 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',
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');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
2
down vote

Add this to your code:

.images__gallery-item {

    flex-shrink: 0;

}

answered Nov 12 at 21:28

Michael_B

140k43224334

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

add a comment |

up vote
2
down vote

Add this to your code:

.images__gallery-item {

    flex-shrink: 0;

}

answered Nov 12 at 21:28

Michael_B

140k43224334

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

add a comment |

up vote
2
down vote

Add this to your code:

.images__gallery-item {

    flex-shrink: 0;

}

answered Nov 12 at 21:28

Michael_B

140k43224334

Add this to your code:

.images__gallery-item {

    flex-shrink: 0;

}

answered Nov 12 at 21:28

Michael_B

140k43224334

answered Nov 12 at 21:28

Michael_B

140k43224334

answered Nov 12 at 21:28

Michael_B

140k43224334

answered Nov 12 at 21:28

Michael_B

140k43224334

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

add a comment |

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

Thanks, DO you know how to hide the horizontal scrollbar?
– maxwell
Nov 12 at 21:46

You mean when there aren't enough items to fill the container? Try overflow-x: auto.
– Michael_B
Nov 12 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 at 22:38

images__gallery has overflow-x: scroll and overflow-y: hidden
– maxwell
Nov 12 at 22:39

add a comment |

up vote
0
down vote

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

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 at 22:16

add a comment |

up vote
0
down vote

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

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 at 22:16

add a comment |

up vote
0
down vote

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

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

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

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

edited Nov 12 at 22:13

answered Nov 12 at 21:32

MichaelvE

1,008136

answered Nov 12 at 21:32

MichaelvE

1,008136

answered Nov 12 at 21:32

MichaelvE

1,008136

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 at 22:16

add a comment |

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 at 22:16

Do you know how to hide the horizontal scrollbar, But keeping the scrolling feature?
– maxwell
Nov 12 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 at 22:16

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky