Why is display flex hiding first image in a row?

Question

I have a row of thumbnails that I want: centered, if they are smaller than the window; and scrollable, if they are bigger than the window.

It's almost working. However, part of the first image disappears to the left of the screen. If I have even more images, the first ones completely disappear. What am I doing wrong?

.container {
  background-color:green;
  display:flex;
  justify-content:center;
  overflow-x:scroll;
  overflow-y:hidden;
}
.box {
  background-color:red;
  margin:0.5vh;
}

<div class='container'>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>

Instead of .container { justify-content:center; } which is the culprit, you want .container { justify-content: - any of the other options } — Carol McKay, Oct 31 '18 at 13:57
@CarolMcKay if I have, say, 3 images, what other option will put the images in the center, spaced only by their margins? — Rodrigo, Oct 31 '18 at 13:59
I don't think there's a clean solution to this problem yet. You may need to use a script to switch the alignment to flex-start once there's an overflow. In the meanwhile, this may be useful: https://stackoverflow.com/q/33454533/3597276 — Michael Benjamin, Oct 31 '18 at 14:14
@HariniP It's a good idea to read the other comments before submitting your own. — Rodrigo, Oct 31 '18 at 14:31
@Pete Thanks for thinking outside the (flex)box. It works perfectly! Will you add this as an answer, please? — Rodrigo, Oct 31 '18 at 14:39

score 2 · Accepted Answer · answered Oct 31 '18 at 14:41

If you don't need flex - you can use inline block and white space nowrap:

.container {
  background-color: green;
  overflow: auto;
  white-space: nowrap;
  text-align: center;
  line-height:0;       /* make bottom padding same as top padding by removing line-height */
  vertical-align:middle;
}

.box {
  display: inline-block;
  padding: 0.5vh;
}

<div class='container'>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  
     please note I comment out white space between elements for equal padding

--><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
--></div>

That solved my problem, at least (shame on flex). Thank you! — Rodrigo, Oct 31 '18 at 14:57

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Reason

The reason is that your boxes are more than the container width and your container has no flex-wrap: wrap; (The default value is no-wrap) So the boxes cannot wrap and as your container is a display: flex its width won't increase with its children (the boxes) and it will behave like block and just fills the screen.

Solution

Try display: inline-flex instead. As it behaves same is inline elements, its width will grow to fit its children width.

Here's a working example based on your code:

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.container {
  background-color: green;
  display: inline-flex;
  justify-content: center;
}

.box {
  background-color: red;
  margin: 0.5vh;
}

.box img {
  display: block;
}

<body>
  <div class="wrapper">
    <div class='container'>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
    </div>
  </div>
</body>

why not `inline-block`?

Because it will not remove the space between the boxes and you have to stick the box elements to each other like this:

<div class='box'></div><!-- no extra white space here --><div class='box'></div>

You may use float to fix this problem or decrease the font-size of container which aren't as good as inline-flex solution.

Also note that although inline-block may work for you, it's not an answer to this question.

Carol McKay · Answer 3 · 2018-10-31T23:03:29.177

.container-container {
    display:flex;
    justify-content:center;
 }

.container {
  background-color:green;
  display:flex;
  /* remove center alignment from inner container but leave display:flex
  -- justify-content:center; */
 /* change overflow-x to auto so we don't have to see it until we need it   -- overflow-x:scroll; */
  overflow-x:auto; /* now overflow auto */
  overflow-y:hidden;
}
.box {
  background-color:red;
  margin:0.5vh;
}
/* bright pink border on the first box to demonstrate it worked */
.firstbox {
   border:6px solid hotpink;
}
/* blue border on the last box to demonstrate if it shows up */
.lastbox {
   border:6px solid blue;
}

<!-- add an extra wrapper with display flex and your center alignment -->
 <div class='container-container'>
<div class='container'>
  <div class='box firstbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>
</div>
<!-- add an extra wrapper with display flex and your center alignment -->
   <div class='container-container'>
<div class='container'>
  <div class='box firstbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box lastbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>
</div>

I had to add a `bottom:0` so that this div wouldn't go to the top of the screen. Then I don't see the scrollbar. I also had to add a `right:0` so that it would fill the whole screen, then it just returned to the first error. — Rodrigo, Oct 31 '18 at 14:31
please see flex and position changes @Rodrigo - another possible solution — Carol McKay, Oct 31 '18 at 23:04

Why is display flex hiding first image in a row?

3 Answers3

Reason

Solution

why not inline-block?

why not `inline-block`?