I am trying to build an image list, where images can have different sizes, as well as the container.
The images work according to my wishes, but the last element, the input wrapper, doesn't. I would like it use to full height of the container, but also to have its width equal to its height to be a square.
I tried multiple styles but I am unable to stop the following problems:
- When there is a lot of space left in the container, the last item becomes too wide
- When the container is full, the last item become too narrow
.container {
resize: both;
width:1000px;
height:200px;
border:1px solid #000;
display:flex;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
align-items:flex-start;
padding:0.25rem 0;
}
.container>* {
border:1px solid #000;
max-width:200px;
max-height:100%;
width: auto;
height: auto;
}
.container>*:not(:first-child) {
margin-left:1rem;
}
.inputfilewrapper {
display: inline-block;
flex:1 0 0px;
height:100%;
}
.inputfile {
display: none;
}
.inputfile + label {
display: block;
height: 100%;
}<div class="container"><img src="https://picsum.photos/200/300"><img src="https://picsum.photos/300/200"><img src="https://picsum.photos/1000/1000"><img src="https://picsum.photos/200/300"><img src="https://picsum.photos/200/300"><div class="inputfilewrapper"><input type="file" id="random123" class="inputfile"><label for="random123">[+]</label></div></div>