3

In the following snippet, you won't be able to see the first items of the flexbox.
Why ? How to solve this problem so the user can scroll horizontally to see all items ?

<div style="display: flex; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>
Yairopro
  • 9,084
  • 6
  • 44
  • 51
  • Use auto margin's instead: https://jsfiddle.net/dk9e3b85/ ... and the dupe link explains why. – Asons Aug 22 '18 at 18:44

4 Answers4

2

Flex tries to fit every item in the same row. If you want to keep items centered add flex-wrap: wrap to the container. If you want to keep them in the same row though you have to changejustify-content to flex-start. Here is the example of the flex-wrap solution.

<div style="display: flex; flex-wrap: wrap; justify-content: center; overflow: auto; padding: 30px 0">
  <div style="padding: 0 15px">AAAAAA</div>
  <div style="padding: 0 15px">BBBBBB</div>
  <div style="padding: 0 15px">CCCCCC</div>
  <div style="padding: 0 15px">DDDDDDD</div>
  <div style="padding: 0 15px">EEEEEEE</div>
  <div style="padding: 0 15px">FFFFFFF</div>
  <div style="padding: 0 15px">GGGGGGG</div>
  <div style="padding: 0 15px">HHHHHHH</div>
  <div style="padding: 0 15px">iiiiiii</div>
  <div style="padding: 0 15px">JJJJJJJ</div>
  <div style="padding: 0 15px">KKKKKKK</div>
  <div style="padding: 0 15px">LLLLLLL</div>
  <div style="padding: 0 15px">MMMMMMM</div>
  <div style="padding: 0 15px">OOOOOOO</div>
</div>

<div style="text-align: center">Scroll horizontally the letters above.</div>
Bikas
  • 856
  • 7
  • 16
  • I need justify content to center items when the screen is bigger. How to prevent flexbox to cut items keeping justify-content? – Yairopro Aug 22 '18 at 17:20
  • 1
    @Yairopro If you need all items to be always in the same row you can use media-query to add the `justify-content: center` only to bigger screens. – Bikas Aug 22 '18 at 17:29
  • I can't use media query. Because i won't be able to know how many items there will be ine the flexbox, neither their sizes. And using media query makes the flexbox dependent on the window's width, rather than on the component's width – Yairopro Aug 22 '18 at 17:39
  • @Yairopro I updated my answer with an example that keeps every item centered. Does this solution work? – Bikas Aug 22 '18 at 18:31
  • you need ot use a media query at viewport sizes that your content will start to have issues being displayed at if you number of items is dynamic. – DrCord Aug 22 '18 at 18:35
  • This should be the correct answer. – Marco Nascimento Jan 12 '21 at 21:51
0

You are using justify-content: center, so depending on the screen/viewport size the beginning and ending elements will be cut off.

DrCord
  • 3,917
  • 3
  • 34
  • 47
  • I need justify content to center items when the screen is bigger. How to prevent flexbox to cut items keeping justify-content? – Yairopro Aug 22 '18 at 17:20
0

Just remove justify-content: center, due to the content being justified in the center of the viewport the sides when the content is larger than the viewport will have to be cut off.

DrCord
  • 3,917
  • 3
  • 34
  • 47
Anji
  • 689
  • 1
  • 5
  • 24
  • I need it to allow items to be centered when rhe viewport is bigger. – Yairopro Aug 22 '18 at 17:18
  • you could use a responsive media query to apply the `justify-content: center` when the viewport is above a certain size. – DrCord Aug 22 '18 at 17:22
  • 1
    Also, your question asks why this cut-off is happening: it is certainly due to the use of `justify-content: center` - this is why, whether you need to use that property or not it is the cause of this problem. If you have a new problem now to ask a question about please start a new question. – DrCord Aug 22 '18 at 17:24
  • @DrCord You partially answered the question "Why". Saying that the "justify-content" is the cause doesn't explain why. And this a not a solution to remove the "justify-content" I placed on purpose. And using media-queries is not a good solution since it makes the component dependent on the window's size rather than on its own. – Yairopro Aug 22 '18 at 17:48
  • added further explanation above. using a media query is the only solution to reasonably apply the css in certain cases. The component is already dependent on the viewport size: it cannot be viewed without the viewport size being compatible with the content... – DrCord Aug 22 '18 at 18:29
0

Remove justify-content: center;. It always makes center your content inside the view port. Thanks.

VSM
  • 1,765
  • 8
  • 18
  • I need justify content to center items when the screen is bigger. How to prevent flexbox to cut items keeping justify-content? – Yairopro Aug 22 '18 at 17:20