CSS auto width is different on Safari - css

Question

i wrote a Webpage in Angular and now some CSS code seems to generate different results:
CSS:
.storypane {
display: flex;
width: 15vw;
height: 20vh;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 1vh;
min-width: 20em;
overflow: hidden;
cursor: pointer;
}
.storypane > .cover {
position: relative;
background-color: blue;
}
On Chrome:
On Safari:
Full CSS File:
.storylist {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
flex-basis: 100%;
row-gap: 2vh;
column-gap: 2vw;
margin: 2vh;
}
.storypane {
display: flex;
width: 15vw;
height: 20vh;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 1vh;
min-width: 20em;
overflow: hidden;
cursor: pointer;
}
.storypane > .cover {
position: relative;
background-color: blue;
}
.storypane:hover{
box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
}
.storypane:active{
box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
}
.storypane > .content {
margin: .1vh;
min-width: auto;
}
.storypane > .content > .details{
margin: 1vh;
min-width: auto;
}
.storypane > .cover > mat-icon {
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
bottom: 50%;
color: white;
font-size: 7vh;
height: 7vh ;
width: 7vh;
opacity: 70%;
display: none;
}
.storypane:hover:not(.playing) > .cover > .play-icon {
display: block;
}
.storypane:active:not(.playing) > .cover > .play-icon {
display: block;
}
.storypane > .cover > img{
max-height: 100%;
min-height: 100%;
max-width: none;
float: left;
border-radius: 1vh 0 0 1vh;
display: block;
}
.storylist .playing {
box-shadow: rgba(0, 182, 112, 0.61) 0px 5px 15px;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {box-shadow: rgb(0, 214, 132) 0px 5px 15px;}
}
.playing > .cover > .play-icon {
display: none;
}
.playing > .cover > .pause-icon {
display: block;
opacity: 80%;
}
.storypane:hover .playing > .cover > .pause-icon {
opacity: 100%;
}
.title {
font-weight: 500;
min-width: 100%;
}
.details {
position: relative;
height: 100%;
}
.meta {
position: absolute;
bottom: 5%;
vertical-align: middle;
opacity: 70%;
font-weight: 500;
font-size: 9pt;
white-space: nowrap;
}
.meta > span > mat-icon {
vertical-align: middle;
font-size: 13pt;
height: 15pt;
width: 13pt;
}
Full Angular HTML-File:
<mat-tab-group>
<mat-tab label="Geschichten">
<div class="storylist">
<div
*ngFor="let story of stories | filter: { type: 'STORY' }"
class="storypane"
[ngClass]="isPlaying(story) ? 'playing' : ''"
>
<div class="cover" (click)="playStory($event, story)">
<img src="{{ story.cover }}" />
<mat-icon mat-list-icon class="play-icon"
>play_circle_outline</mat-icon
>
<mat-icon mat-list-icon class="pause-icon"
>pause_circle_outline</mat-icon
>
</div>
<div class="content">
<div class="details">
<span class="title">{{ story.title }}</span>
<div class="meta">
<span>
<mat-icon mat-list-icon>insert_invitation</mat-icon>
{{ story.releasedAt | date: "dd.MM.yyyy" }}
</span>
<span class="duration">
<mat-icon mat-list-icon>equalizer</mat-icon>
{{ story.duration }}
</span>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
<ng-template [ngIf]="isCalenderActive()">
<mat-tab label="Adventskalender">
<div class="storylist">
<div
*ngFor="let story of stories | filter: { type: 'CSTORY22' }"
class="storypane"
[ngClass]="isPlaying(story) ? 'playing' : ''"
>
<div class="cover" (click)="playStory($event, story)">
<img src="{{ story.cover }}" />
<mat-icon mat-list-icon class="play-icon"
>play_circle_outline</mat-icon
>
<mat-icon mat-list-icon class="pause-icon"
>pause_circle_outline</mat-icon
>
</div>
<div class="content">
<div class="details">
<span class="title">{{ story.title }}</span>
<div class="meta">
<span>
<mat-icon mat-list-icon>insert_invitation</mat-icon>
{{ story.releasedAt | date: "dd.MM.yyyy" }}
</span>
<span class="duration">
<mat-icon mat-list-icon>equalizer</mat-icon>
{{ story.duration }}
</span>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</ng-template>
</mat-tab-group>
I tried to generate the same result on both Browsers on all devices.
Is there a way to translate these CSS-Files so that all Browsers understands it in the same way?

Answer 1

that is just because not every browser supports every feature of css, many different styles have to be used with prefixes such as -webkit- , -moz- and so on, this is because not every on these styles is yet supported and just added experimentally
here: https://www.w3schools.com/cssref/css3_browsersupport.php
you can see which styles are not yet supportet/use a prefix