float:left even if parent div is too small - html

Question

The issue I am facing here has to do with the fact that the total width of the child divs is larger than the width of the parent div. I need the child divs to float to the left of each other even if they overflow the parent div.
I have this HTML:
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>
And this CSS:
.gallery_container {
width: 70%;
height: 100%;
float: left;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
How can I get all divs with of class gallery_img_container to float to the left of each other? I've tried adding float:left .gallery_img_container but it doesn't do anything. They go underneath each other instead of side by side.
Another note is that .gallery_img_container must have the display:flex property
Thanks in advance for any help!
EDIT: .gallery_img_container must have the width:100% property

Answer 1

You have "width:100%;" applied to the ".gallery_img_container" class causing each container to break into next line, remove this and add "float: left;" then it will work.

Answer 2

Edited based on comments.
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
display: flex;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>

Answer 3

Farasat,
I'm not entirely sure what you are trying to accomplish. Let me see if I can confirm what I think you are seeking. You want to achieve a result where you have a set of images which are, collectively, wider than #viewport, but you want them to keep "piling up" to the right. That is, you don't want them to wrap. If we consider [] the bounds of the viewport and # to be an image, you want (for example), something like this:
[#]##
Is this right?
If so, I think a key thing to note is that your gallery_img_container is of display flex, which means it is a block, not inline, style. This will cause the gallery_img_containers to stack, not flow to the right.
I think all you need to do is to say "white-space: nowrap;" in #viewport (to keep things from wrapping), and then to make gallery_img_container to be of type inline-flex, so that they do not stack.
I'm attaching an example to hopefully demonstrate what I mean (notes: I just grabbed a random image off the web to make this more concrete. Also note that since your gallery_img_container is 100%, each image is the size of the #viewport. I'm not sure if that's what you want).
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
white-space: nowrap;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
</div>
</div>