Определенный фрагмент кода HTML не очень хорошо отражается на браузерах Safari

Question

Прежде всего, я не знаю, подходит ли заголовок Вопроса, но я не мог думать ни о чем другом из моего ума. Предлагайте редактировать, если у вас есть лучший. Спасибо.

Я работаю на веб-странице, которая использует как Угловой материал, так и библиотеки LumX. Все остальное хорошо работает во всех браузерах, но этот определенный фрагмент кода не работает должным образом в браузерах Safari (как iPhone, так и Mac) , когда он находится в режиме малого экрана.

<md-content flex layout="column"> 
     <form layout-padding name="newSuperuserForm" flex> 
      <span flex layout="column"> 
       <span flex layout="row" layout-sm="column" layout-xs="column"> 
        <span flex="50" flex-sm="100" flex-xs="100" layout="column"> 
         <lx-button lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button> 
         <span flex class="ph-padding-bottom-20"></span> 
         <lx-button lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button> 
        </span>  
       </span> 
      </span>  
     </form>    
    </md-content> 

Я опустил остальную часть кода, который работает. Только этот фрагмент отображает пустое место в браузере Safari, в то время как в других браузерах (Firefox на Mac, Chrome в Windows, Android-браузере) он работает отлично.

В частности, если что-то в пределах div:

<span flex="50" flex-sm="100" flex-xs="100" layout="column"> ... </div> 

Safari может сделать его, например, если я положил в него текст, все работает просто отлично. Но он не может отображать кнопки LumX, когда экран небольшой.

Этот скриншот показывает, как код отображается в Safari (слева) и Firefox (справа), когда размер экрана мал.

Сафари Веб-инспектор показывает, что элементы кнопки являются там.

Я действительно новичок в интерфейсной разработке. Любая идея, что здесь происходит? Это действительно помогло бы мне завершить мой проект. Спасибо.

Answer 1

Я не знаю точной проблемы без фрагмента рабочего кода. Но правильное использование гибкого и макета будет

<span flex layout="column"> 
     <span flex layout="column" layout-gt-sm="row"> 
      <span flex="100" flex-gt-sm="50" layout="column"> 
       <lx-button flex lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button> 
       <span flex class="ph-padding-bottom-20"></span> 
       <lx-button flex lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button> 
      </span>  
     </span>