overflow: hidden does not hide object in a flex-box on Safari iOS

Question

I have a meter that is supposed to be shaped like this: Correct Bar

But the on iOS Safari it appears like this

It seems like the meter box's overflow: hidden property does not work on iOs Safari.

I have a meter bar that's inside a meter box that has the overflow property set to hidden and then the meter box inside a meter container.

This is my code

.meter-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  width: 80%;
  height: 30%;
  margin-bottom: 1%;
  margin-right: 0;
}
.meter {
  margin-left: auto;
  overflow: hidden;
  width: 70%;
  height: 100%;
  border: 1px solid rgb(241, 241, 241);
  background-color: rgb(224, 224, 224);

  border-radius: 25px 0px 25px 0px;
}

.meter-bar {
  margin-top: -1px;
  margin-left: -1px;
  height: 100%;
  background-color: teal;
  border-radius: 0px 0px 25px 0px;
}

Answer 1

It seems to be a height issue:

.meter-container {
  flex: 0 0 auto; /* ensure to set height */