Flexbox and overflow:scroll

Question

I'm trying to get these elements with 25% width inside a flexbox and with overflow-x:scroll. There will be more then 4 elements so my aim is to get 25% per each of the first 4, the rest to be scrollable. My current setup doesn't return 25% per each element. Could you please help me.

Thanks.

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: 25%;
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>

Temani Afif · Accepted Answer · 2017-10-23 19:57:22Z

3

You set the width to 25%, but forgot about margins. You can get this 4 items fully displayed with a small calculation of width: width: calc(25% - 20px);, where 20px is the sum of left and right margin of each item. Here is an example:

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: calc(25% - 20px);
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>

edited Oct 23, 2017 at 19:57

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

answered Oct 23, 2017 at 19:54

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Filip Cicvarek Over a year ago

There you go. Thanks a lot.

Adil · Accepted Answer · 2018-04-06 12:53:55Z

The problem is that you also added on a 10px margin. Change your width to this to your .cont25 div and I think you will get what you are looking for.

width: calc(25% - 20px);

#wrapper {
  padding:0 10px;
  max-width:1400px;
  margin:0 auto;
}
.cont25 {
  width: calc(25% - 20px);
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display:flex;
}

#novinky .flex {
  overflow:scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
      <div class="cont25"><p>25%</p></div>
   </div>
  </div>
</div>

Collectives™ on Stack Overflow

Flexbox and overflow:scroll

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related