overflow: hidden не скрывает объект во флекс-боксе в Safari iOS

Question

У меня есть измеритель, который должен иметь такую ​​форму: Правильная полоса

Но в iOS Safari он выглядит так

Похоже, что свойство overflow: hidden не работает в iOs Safari.

У меня есть индикаторная полоса внутри блока счетчика, для которого свойство переполнения установлено на скрытое, а затем поле счетчика внутри контейнера счетчика.

Это мой код

.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

Кажется, проблема в высоте:

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