How do I make a parent with flex have children overflow the parent

Question

I'm trying to make a horizontal scrolling thing...

The parent container has a fixed height and a fixed width.

The children also have a fixed height and a fixed with.

The parent container has the display: flex; property.

However, when the children is supposed to overflow the parent container, instead it shrinks the children's size (width) to stay in the parent container.

Here's an exact example of what's happening:

https://jsfiddle.net/2ch4ro09/2/

or

body {
  margin: 0;
  background: #333;
}
.parent {
    height: 200px;
    width: 500px;
    align-items: center;
    overflow: auto;
    display: flex;
}

.child {
    height: 120px;
    width: 120px; /* Should be a square */

    background: rgba(255, 255, 255, 0.1);
    margin: 4px;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

TL;DR:

I want the child elements to just fly off screen to the right - no-wrap.

How would I do this?

_Comment the link to the duplicate so I can see it and tell you if it actually answers my question or not_ that's not how this works. We flag so you can see if it's a duplicate. Flagging isn't necessarily a bad thing. — disinfor, Aug 10 '20 at 21:59
@disinfor | Half the time the duplicated question doesn't even answer the question. I understand the point of the flag but there's a bunch of people who don't read the OPs question before marking it as a duplicate. — , Aug 10 '20 at 22:22
*there's a bunch of people who don't read the OPs question before marking it as a duplicate* --> there is also a bunch of people who never read the given duplicates — Temani Afif, Aug 10 '20 at 22:23
The problem with "marking as duplicate" is that, it's not a question, it's a statement. The OP can't do anything, StackOverflow is basically saying: 'it's a duplicate "no buts". — , Aug 10 '20 at 22:27
@TigerYT When something is flagged as a duplicate the language provided by Stack Overflow is "Does this answer your question: link" It is a question, and again, the flagging mechanism is just a suggestion. If you get multiple flags marking it as a duplicate, then the duplicate most likely does answer the question. — disinfor, Aug 11 '20 at 14:28
@disinfor | It says, and I quote `"This question already has an answer here: (link)"` Then it goes on to say: `"Your post has been associated with a similar question. If this question doesn’t resolve your question, ask a new one."` If it was a "Does this answer your question?` then it shouldn't have even mentioned "ask a new one". — , Aug 11 '20 at 17:29
This current question is marked as a duplicate (legitimately) yet I don't have access to any "unmark" button, all it says is "delete or edit your question". — , Aug 11 '20 at 17:34
The issue here is that Temani has enough site reputation to close questions like this without you getting that message in the comments - which is what would have happened had another user marked this as a duplicate. Under most circumstances, you would get a message in the comments regarding a possible duplicate. But as you said, since this was a legitimate duplicate, Temani closed this without waiting for 2 other members to flag as a duplicate. This is sometimes done to prevent answers that already exist on another question. — disinfor, Aug 11 '20 at 17:49
That's the problem, imo. A few days maybe a month of editing answers, editing questions and answering questions and you get quite a few "powerful" perks that a lot people use incorrectly. Hence, why to prevent an incorrect duplicate on my question I specifically asked for the person to show the duplicated link in the comments first. — , Aug 11 '20 at 18:08

score 0 · Accepted Answer · answered Aug 10 '20 at 22:00

You can do it this way:

body {
  margin: 0;
  background: #333;
}
.parent {
    height: 200px;
    width: 500px;
    align-items: center;
    overflow: auto;
    
    white-space: nowrap;
}

.child {
    height: 120px;
    width: 120px; /* Should be a square */

    background: rgba(255, 255, 255, 0.1);
    margin: 4px;
    
    display: inline-block;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

Not sure why someone down-voted this, it works. Yes, using `flex-shrink: 0;` would be better, but it still answered my question. — , Aug 10 '20 at 22:23
@TigerYT I down voted it because this answer removes `flex` which doesn't answer your original question of _How do I make a parent WITH flex..._ — disinfor, Aug 11 '20 at 14:05
@disinfor | Great, thanks for explaining. Not only now is it clear why this answer got downvoted but the person who answered the question incorrectly (if that read your explanation) now also understands why it was downvoted and can improve on writing better answers in the future. — , Aug 11 '20 at 17:26

How do I make a parent with flex have children overflow the parent

1 Answers1