flex-shrink не работает корректно с img в WebKit (движок Safari)

Question

У меня есть страница где должны быть расположены элементы: картинка и тег form с полями. Задана ширина 40% для картинки и 60% для формы и соотвествующий gap для расстояния между ними. При уменьшении ширины экрана элементы выходят за него, что логично т.к. я указал flex-shrink 0 для обоих. Но вот я меняю flex-shink на еденицу для img и в firefox все корректно, форма занимает 60% пространства, а img сколько сможет и при малой ширине вообще уменьшается дл крошечных размеров. Даже если я задам для img ширину в 1000% - она будет игнорироваться т.к. есть свойство flex-shrink. НО! В WebKit это так не работает, там наоборот, свойство flex-shrink будто игнорируется для картинки полностью. При этом для формы flex-shrink в WebKit работает нормально.

Вот скрины:

flex-shrink по нулям:

flex-shrink: 1 у img:

Теперь тажа страница, но в WebKit:

Вот мой код с замененной картинкой и переводом стилей со stylus в css:

.login {
  background-color: #efefef;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  gap: 20px;
  height: 100%;
  padding: 50px;
}

.login__image {
  border: 1px solid #000;
  width: 40%;
  height: fit-content;
  flex-shrink: 1;
}

.login__form {
  border: 1px solid #000;
  flex-shrink: 0;
  align-self: center;
  max-width: 500px;
  width: 60%;
  display: grid;
  align-content: start;
  gap: 20px;
}

.login__button {
    width: max-content;
    justify-self: end;
}

<div class="login">
    <img class="login__image" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.snut.fr%2Fwp-content%2Fuploads%2F2015%2F12%2Fimage-de-nature-9.jpg&f=1&nofb=1&ipt=68e3c6bbc0141d1d6fa59504d7e15401ce426f5e6d2a1e9e9f845365ff7bd811&ipo=images" alt="naruto-fingers" />
    <form class="login__form">
      <BaseField class="login__field" placeholder="Nickname" />
      <p>Add avatar</p>
      <BaseButton class="login__button">
        Register
      </BaseButton>
    </form>
  </div>

Де-факто движок WebKitGtk т.к. я под linux, но сути дела не меняет.

БЛОГ НА HUSL

flex-shrink не работает корректно с img в WebKit (движок Safari)

Ответы (0 шт):