Flexbox: Firefox, Chrome и Safari

Question

Это мой первый пост здесь, извините, если я не понимаю некоторых правил.

У меня очень сложная проблема. Я изучаю flexbox, проверяю свой код с помощью Firefox и работаю нормально, но когда я использую Chrome или Safari, IMG не работает с отзывчивым и не масштабируется должным образом.

Я загрузил код здесь: https://codepen.io/JoaquinGalloUX/pen/XWRyxEm

Пожалуйста, проверьте в Firefox и Chrome, я искал во всем Интернете, и у меня нет ответа.

Большое спасибо за ваше время.

* {
  margin: 0;
  padding: 0
}

.container-imagenes {
  margin: 0;
  padding: 0;
  /* border: 20px solid white; */
  display: inline-flex;
  background: #DB277F;
  align-items: center;
  max-width: 1200px;
  font-size: 20px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: stretch;
  display: -moz-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

.textbox {
  flex-basis: 500px;
  flex-grow: 1;
  background: #DB277F;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 50px;
}

.text1 {
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

.text2 {
  font-size: 40px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

.text3 {
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

#mailregs2 {
  border: 2px solid rgb(255, 255, 255);
  background-color: #008BAC;
  color: #ffff;
  ;
  padding: 10px 20px;
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
}

.imagen-1 {
  width: 100%;
  flex-grow: 4;
  flex-basis: 300px;
}

.imagen-2 {
  width: 100%;
  flex-grow: 4;
  flex-basis: 300px;
}

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="container-imagenes">

  <img src="https://source.unsplash.com/user/erondu/300x300" class="imagen-1">
  <div class="textbox">
    <div class="text1">Suscribite a</div>
    <div class="text2">TEST!</div>
    <div class="text3">Suma puntos por TEST!</div>
    <input type="submit" value="Registrarme" id=mailregs2>
  </div>
  <img src="https://source.unsplash.com/user/erondu/300x300" class="imagen-2">

</div>
</div>

Flexbox: Firefox, Chrome и Safari

Ответы (2)