Problem when using with overflow-x: scroll and justify-content: center

Question

I am having issue while using overflow-x: scroll and justify-content: center on flex parent container. Please see my code below.

issue: first flex child item is not showing it is crop in left or other all child item. please see my screenshot and code below.

I need your help. thank you in advance.

issue screenshot here

.container {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  overflow-x: scroll;
}

.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

score 0 · Accepted Answer · answered Jun 09 '20 at 17:34

0

The justify-content:center is making the content to align to center and some of the left is cut off. You could remove it and try.

    .container {
      width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      overflow-x:scroll
    } 
    .box {
      height: 100px;
      border: 1px solid red;
      min-width: 100px;
      margin-right: 10px;
      flex-grow: 1;
    }

<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>

answered Jun 09 '20 at 17:34

vishnu sandhireddy

1,148
1
7
12

3

thank for your quick response. But i need center align when container has one or two child item – sabir sam Jun 09 '20 at 17:39
May be you could try some JS solution here. The box count exceeding a number could remove justify-content – vishnu sandhireddy Jun 10 '20 at 02:52

Sahil Sharma · Answer 2 · 2020-06-09T17:46:12.497

0

remove "justify-content:center". And you said that you need center aligned elements when there are only 1 or 2 elements...so the answer is they will by aligned automatically...if there will be only two elements each of them will have 250px width and if there will be only one then width of this element will be 500px.

edited Jun 09 '20 at 17:46

answered Jun 09 '20 at 17:41

Sahil Sharma

136
1
8

1

Thanks for your quick response. But i need center align when container has few item like one or two child item. – sabir sam Jun 09 '20 at 17:42
I explained you everything just try and you will understand. – Sahil Sharma Jun 09 '20 at 17:47
3

@sabirsam The suggestion to remove `justify-content:center` is correct, what is missing is to add auto-margins to first and lest elements, so that free space is distributed specifically to them, and only in correct direction: `.box {margin-left: auto;} .box:last-child {margin-right: auto;}` – Ivan Koshelev Nov 21 '20 at 16:32

Problem when using with overflow-x: scroll and justify-content: center

2 Answers2