Your question doesn’t seem very clear to me.

If you want to have a row of images, all of them with their original size, all you need to do it’s apply flex alignment (row & wrap) to the parent and add flex: auto with margin: auto; to the children:

<div class="media-container">
  <img class="display-img" src="https://picsum.photos/160">
  <img class="display-img" src="https://picsum.photos/160/90">
  <img class="display-img" src="https://picsum.photos/150/40">
  <img class="display-img" src="https://picsum.photos/160/100">
  <img class="display-img" src="https://picsum.photos/100/290">
</div>

[Added random aspect ratio images to prove they are all aligned regardless of the size of all your images have the same aspect ratio, the result would be the same as in your example image]

.media-container {
  display: flex;
  flex-flow: row wrap;
}

.display-img {
  margin: auto;
  flex: auto;
}

This does the following:

• media-container: set flex flow to row and wrap, so when more images are added, they are put into a new line if there is no more free space.
• on the images, margin auto will take care of aligning the image inside each cell (both in horizontal and vertical) and flex: auto, which is the equivalent for flex: 1 1 auto (meaning flex grow and flex shrink would be set to one, no grow, no shrink and flex-basis to auto [initial main size of a flex item]).

Check the this codepen.

I am also pretty confused by your request tbh. The screenshot you posted, that you want to replicate, is just standard behaviour with css grid. So maybe I misunderstood. Here is the codepen with correct settings to replicate the screenshot you posted:

https://codepen.io/doughballs/pen/bGdeBQa

On the container we set:

main {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 2px solid red;
  padding: 20px;
}

Which tells the contents to be a minimum of 200px wide, and to wrap if there isn’t enough space.

And on the images:

img {
  display: block;
  width:100%;
  border: 2px solid black;

}

This is a great resource from Jen Simmons:

https://www.youtube.com/watch?v=tFKrK4eAiUQ&t=218s

For your desired effect, lets use a container with a media ‘child’, where each child have its content.

<div class="media-container">
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/90">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/150/40">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/100">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/100/290">
    </div>
</div>

The rule youre searching for was the ‘flex-wrap: wrap’

.media-container{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.media-container .media{
    width: 33%;
}

You can play with values and match the more suitable for you.

And please use Webpack for css prefixes

I have an issue with trying to make the items within a container take up the space the way i want. The main issue seems to be that flex box and css grid are made adjust to changes in width and not height, where as i need the opposite behaviour.This is basically what I want my elements to do

Check the desired effect here.

I have tried using both flex box and css grid.
This is my current code, also containing some residue of my previous attempt. It just makes the images display in their actual size.
The media-container’s height is changed via javascript.

.display-img {
  padding:0px;
  margin-top:-4px;
  margin-bottom:-4px;
  flex:0 1 auto;
  height:auto;
}

.media-container{
  width: auto;
  height:800px;
  display:flex;
  //grid-template-rows: repeat(auto-fit,auto);
  //grid-template-columns: repeat(auto-fit,minmax(200px,0.5fr));
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  visibility: hidden;
}

<div class="media-container">
  <img class="display-img" src="assets/projects/feierlichkeiten/23.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/22.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/21.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/20.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/19.png"></img>
</div>

Thanks to everyone who has some idea.