Flex элементы с фоновыми изображениями, перекрывающимися в Safari

Question

Это отзывчивая страница, созданная с помощью Gatsby:

<div className='sections'>                
  <section className='section1'>
    <h1 className='title'>Title</h1>
    <div className='subTitle'>
       <h1 className='subtitleRow'>Subtitle</h1>
       <div className='logo'>
          <img src={logo} alt='Logo'></img>
       </div>                        
     </div>
     <p className='someText'>Blablabla</p>
     <p className=‘someText'>More blablabla</p>
   </section>
    <section>
        … same stuff as previous section
    </section>
</div>

CSS:

Я использую этот замечательный хак

Как получить высоту div автоматически настроить размер фона? , чтобы установить высоту для div, которые имеют фоновое изображение.

Это прекрасно работает в Chrome и Firefox, однако в Safari (MacOS и * 1021) *) элементы p отображаются в верхней части контейнера раздела, перекрывая заголовок и субтитры. Проверяя DOM, элементы находятся в том же порядке, в котором они определены ...

Я попытался установить параметры отображения, flex-direction, order безуспешно ...

Есть идеи?

Спасибо!

Answer 1

Настройка

.section1 {
    height:auto;
  }

И удаление padding-bottom исправило это.