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?






html css html5 css3 flexbox







share|improve this question




























    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?






    html css html5 css3 flexbox







    share|improve this question


























      up vote
      0
      down vote

      favorite









      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?






      html css html5 css3 flexbox







      share|improve this question















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 12 at 22:47

























      asked Nov 12 at 21:22









      maxwell

      314




      314
























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





          share|improve this answer





















          • 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


















          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>








          share|improve this answer























          • 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











          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


















          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








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





          share|improve this answer





















          • 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















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





          share|improve this answer





















          • 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













          up vote
          2
          down vote










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





          share|improve this answer












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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 12 at 21:28









          Michael_B

          140k43224334




          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


















          • 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






          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




          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




          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




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












          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>








          share|improve this answer























          • 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















          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>








          share|improve this answer























          • 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













          up vote
          0
          down vote










          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>








          share|improve this answer














          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 12 at 22:13

























          answered Nov 12 at 21:32









          MichaelvE

          1,008136




          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


















          • 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




          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




          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


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          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





















































          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







          -

          Popular posts from this blog

          How to change which sound is reproduced for terminal bell?

          Image
          3 Recently upgrade to 18.10 from 18.04, and using the terminal is becoming annoying: the new alert sound is a drip ( /usr/share/sounds/gnome/default/alerts/drip.ogg ), and the previous one is still located at ( /usr/share/sounds/ubuntu/stereo/bell.ogg ). My issue is that at the gnome-terminal, when autocompleting or pressing left BOTH sounds are reproduced, at the same time. I want to just have ubuntu/stereo/bell.ogg active, not both . At the moment I have been only able to reduce the volume of the alerts (but still both are played), or turn the alerts down (but I dislike both "solutions"). gnome-terminal 18.10 teminal-bell share | improve this question
          Read more

          Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

          Image
          up vote 5 down vote favorite 2 I would like to make it so that the vertical space below the title of each chapter is the same when using the Bjornstrup package (i.e. so that the descenders do not affect the spacing - as shown by the red arrow in the picture below). I think I'm fairly happy with the spacing around "A chapter", so I'd really like titles without descenders (e.g. "Contents") to have the same vertical spacing as "A chapter" below the title. I would also like to remove the large "0" in the contents title. Any help appreciated, as always. documentclass[11pt,a4paper]{book} % Packages[![enter image description here][1]][1] usepackage[left=3.5cm, right=3.5cm, top=4.3cm, bottom=4.25cm]{geometry} usepackage[utf8]{inputenc} usepackage{libertine} usepackage[libertine]{newtx
          Read more

          Can I use Tabulator js library in my java Spring + Thymeleaf project?

          Image
          0 I want to add Tabulator js to my java project. I added tabulator.min.js, tabulator.min.css to resources folder. After that added to my html page these dependencies as recommending in readme.md. <link rel="stylesheet" th:href="@{/css/tabulator.min.css}"> <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script> Now my tables view all elements, that I have in the html page, but not correct. In the documentation of Tabulator is example how to create header and table, var table = new Tabulator("#example-table", { columns:[ {title:"Name", field:"name", sorter:"string", width:200, editor:true}, {title:"Age", field:"age", sorter:"
          Read more