Соотношение сторон на Mozilla Firefox

Question

На одной из страниц моего веб-сайта я хотел бы добавить картинку с динамическим размером c. Для этого я следую прекрасному учебнику W3school: ссылка

Этот метод отлично работает в Safari и Chrome; но выдает ошибку на firefox ..

Делая анализ размеров контейнеров, я подумал, что расчет кажется другим ..

Во-первых, вот Chrome и Метод Safari:

• Красный блок имеет ширину 50% (относительно синего)
• Красный блок имеет высоту 40% (поскольку мы также используем ширину синий в качестве основы для расчета%)

Затем в firefox он дает мне такой результат:

• Красный блок имеет ширину 50% (по отношению к синему)
• Красный блок имеет высоту 40% от высоты синего, а не 40% его родительской ширины!

body {
  background-color: blue;
}

.home_box {
  margin: auto;
  margin-bottom: 40px;
  width: 90%;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19 */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  flex-direction: row;
}

#home_picture {
  width: 32%;
  height: 0px;
  padding-top: 18.1%;
  background-color: red;
  /*background: url('../Img/picture.jpg') no-repeat;
  background-size: contain;*/
}

.home_box p {
  width: 68%;
}

<div class="home_box">
  <div id="home_picture"></div>
  <p>Lorem ipsum</p>
</div>

Не могли бы вы помочь решить эту проблему, пожалуйста?

Answer 1

Возможно, это проблема с Firefox версией. Когда я запускаю этот код (слегка подправленный из вашего и показанный ниже) на Firefox 72, я получаю вывод, показанный на рисунке ниже, такой же, как и в старых Microsoft Edge, Chrome на основе Edge и Safari. Является ли вывод правильным?

body{
  background-color: blue;
}
.home_box
{
    margin: auto;
    margin-bottom: 40px;
    width: 90%;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19 */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    flex-direction: row;
}

#home_picture
{
    width: 32%;
    height: 0px;
    padding-top: 18.1%;
    background-color: red;
    background-size: contain;
}

.home_box p
{
    width: 68%;
}

<div class="home_box">
    <div id="home_picture"></div>
</div>