Nested Flexbox images wrap properly - html

Question

I'm trying to set the nested images inside gallery to:
1) Wrap thumbs horizontally, i.e. in this example, one & two on first row and then below them 3 & 4 and so on..
2) Wrap thumbs vertically as well w/ wrapping thumbs moving up to top-rt & filling downward like first column.
3) Prevent thumbs from increasing gallery wrapper height & wrap instead. I tried setting gallerry to fixed height but still thumbs overflow.
<div id="list-wrapper">
<div id="gallery">
<div><img src="images/1.png" alt="one" /></div>
<div><img src="images/2.png" alt="two" /></div>
<div><img src="images/1.png" alt="three" /></div>
<div><img src="images/2.png" alt="four" /></div>
<div><img src="images/1.png" alt="five" /></div>
<div><img src="images/2.png" alt="six" /></div>
</div>
<div id="mainimg"><img src="images/lg.png" alt="large" /></div>
</div>
#list-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
flex-wrap: wrap;
}
#list-wrapper #gallery {
flex: 1 1 20%;
background-color:red;
width:200px;
}
#list-wrapper #gallery div {
width:100px;
height:100px;
}
#list-wrapper #gallery div img {
width:100px;
height:100px;
}
#list-wrapper #mainimg {
flex: 1 1 80%;
background-color:blue;
}
#list-wrapper #mainimg img {
width:100%;
height:auto;
}
Flexbox Fiddle
Examples matching questions:
1) Horizontal:
2) Vertical:
3) Prevent overflow:

Answer 1

Something like this? https://jsfiddle.net/xwkr3jgL/
You can easily fix size/margin/etc. (have images in the correct ratio and sizes) to make it more pretty, but this is how you can do in like you want =)
Change the proptery flex-direction to row for
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
and to column for:
| 1 | 4 |
| 2 | 5 |
| 3 | 6 |
#list-wrapper {
width: 800px;
display: grid;
grid-template-columns: 20% 80%;
border: 10px solid #000;
}
#gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 420px;
}
#gallery > div {
width: 50%;
}
#gallery img {
max-width: 100%;
}
#mainimg > img {
max-width: 100%;
display: block;
}
<div id="list-wrapper">
<div id="gallery">
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="one" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="two" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="three" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="four" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="five" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="six" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="seven" />
</div>
</div>
<div id="mainimg"><img src="https://shortlist.imgix.net/app/uploads/2015/12/04110243/50-of-the-best-star-wars-quotes-60-852x568.jpg?w=1200&h=1&fit=max&auto=format%2Ccompress" alt="large" /></div>
</div>