Сложная версия макета с учетом отображаемой таблицы и максимальной ширины

Question

Я потратил много времени на эту проблему, поэтому мой последний шаг - спросить вас, ребята, там. Возможно ты можешь помочь мне.

Речь идет об этой типичной проблеме css-table, где firefox (и т. Д.) Не будет отображать max-width правильно. Я уже пытался реализовать почти в каждой позиции, но я не заставляю этого ребенка работать.

Safari отображает все отлично и как я хочу, чтобы это было. Но Firefox не изменяет размер изображения (в моей скрипке я отметил фон RED, когда это происходит) ... и появляется нежелательная горизонтальная полоса прокрутки. (так что вам придется изменять размер окна) (Обратите внимание, что установка ширины img на 100% не будет работать для меня, потому что меньшие imgs будут масштабироваться)

Как я могу заставить Firefox изменить размер правильно?

Fiddle: http://jsfiddle.net/4jk2hk77/

HTML:

<article> 
    <div class="gallery" style="width: 400px;"> 
     <img src="http://lorempixel.com/400/267/"> 
    </div> 
    <div> 
     <div class="ctrl"></div> 
     <h2>TITLE</h2> 
     <p>Lorem ipsum …</p> 
    </div> 
</article> 

SCSS:

article { 
    display: table; 
    width: 100%; 

    .gallery { 
     display: table-cell; 
     vertical-align: top; 
     max-width: 100%; 

     img { 
      max-width: 100%; 
     } 

     + div { 
      margin-left: 30px; 
      min-width: 200px; 

      h2, p { 
       max-width: 300px; 
      } 
     } 
    } 
} 

.ctrl { 
    width: 150px; 
    height: 10px; 
    float: right; 
    background: black; 
    margin: 0 0 1em 1em; 
} 

Спасибо, ребята, за каждую идею я буду получать !!

Answer 1

НАКОНЕЦ Я нашел ответ сам!

здесь рабочий раствор: http://jsfiddle.net/mkLdyqq0/

ИЗМЕНЕНИЯ В HTML:

<div class="gallery" style="width: 400px;"> 
     <div> 
      <img src="http://lorempixel.com/400/267/"> 
     </div> 
    </div> 
    <div> 

(IMG-Tag теперь обернут другой Div-тег)

ИЗМЕНЕНИЯ В SCSS:

article { 
    … 

    .gallery { 
     … 
     max-width: 100%; 

     div { 
      display: inline-table; 
      table-layout: fixed; 
      width: 100%; 

      img { 
       … 
      } 
     } 

     + div { 
      … 
     } 
    } 
} 

Из-за укладки оболочки-div с встроенным столом и таблицей-макетом: исправлено ... это «как-то» работает.

WOHOOOO!

THX для всех ваших входов !!