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?

edited Nov 12 '18 at 22:47

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?

edited Nov 12 '18 at 22:47

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?

edited Nov 12 '18 at 22:47

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

edited Nov 12 '18 at 22:47

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

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

add a comment |

2 Answers
2

active

oldest

votes

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

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

add a comment |

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 '18 at 22:13

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');
});

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

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

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

add a comment |

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

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

add a comment |

Add this to your code:

.images__gallery-item {

    flex-shrink: 0;

}

answered Nov 12 '18 at 21:28

Michael_B

145k47231340

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

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

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

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

images__gallery has overflow-x: scroll and overflow-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

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

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

add a comment |

.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 '18 at 22:13

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 |

.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 '18 at 22:13

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 |

.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 '18 at 22:13

answered Nov 12 '18 at 21:32

MichaelvE

1,1531310

.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 '18 at 22:13

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

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

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');
});

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

搜尋此網誌

Vfrdtyky