Почему установка процент заполнения (и высота) не работают в элементах внутри Flexbox в FF

Смотрите скрипку: http://jsfiddle.net/4E2bV/793/Почему установка процент заполнения (и высота) не работают в элементах внутри Flexbox в FF

.imageContainer { 
    position: relative; 
    width: 23%; 
    padding-bottom: 23%; 
    float: left; 
    height: 0; 
    margin: 1%; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
} 
body{ 
    display: flex; 
}

На ФФ элементы внутри тела имеют обивка равна 0 - в других браузерах он правильно 23% для нижнего заполнения

Есть ли способ обхода пути использования процентных значений в FF? В Chrome и IE он работает нормально.

источник

2014-09-16 MatiK

Вы играете на моем FF вообще. Мне нужно изменить его на WebKit-Flex, как это:

body{ 
    display: -webkit-flex; 
}

Затем он работает точно так же, как и в Chrome нет проблем с набивкой.
Моя версия FF: 28,0
My Chrome версии: 37.0.2062.120 м

источник

2014-09-24 09:38:32 wojjas

Как я уже писал - проблема в том, что это не работает в FF - но это работает в Chrome. Если вы измените его на -webkit-flex, он будет распознан только Chrome - не FF - в результате будет отображаться: block (default) в FF. Но мне нужно, чтобы он работал с flexbox на FF. – MatiK

Ваше решение просто включает flexbox только в браузерах на основе webkit – MatiK

Да, я вижу. И это просто отключает flexbox. – wojjas

Да, жаль, что я не понял. Не пытайтесь использовать корпус в качестве гибкого контейнера. Вместо этого используйте div внутри него, окружая все изображения. Я также изменил css для .imageContainer и .img совсем немного во что-то, что, по-моему, выглядит красиво. Симпатичные кошечки, кстати :-)

Вот код (работает как на Chrome и FF):

<style> 
    .imageContainer{ 
     /*flex-grow:1;*/ 
     width:10%;  /*<--- use this to change the image's width */ 
     margin:1%; 
    } 
    .cats{ 
     display: flex; 
    } 
    img { 
     max-height: 100%; 
     max-width: 100%; 
    } 
</style> 

<html> 
<body> 
<div class="cats"> 
    <div class="imageContainer"> 
     <img src="http://placekitten.com/300/300" /> 
    </div> 
    <div class="imageContainer"> 
     <img src="http://placekitten.com/301/301" /> 
    </div> 
    <div class="imageContainer"> 
     <img src="http://placekitten.com/302/303" /> 
    </div> 
    <div class="imageContainer"> 
     <img src="http://placekitten.com/303/303" /> 
    </div> 
</div> 
</body> 
</html>

источник

2014-09-25 12:50:28 wojjas

Мой вопрос: «Существует ли какое-либо обходное решение для использования ** процентных ** значений в FF?» Если я укажу высоту .imageContainer (или заполнение) в процентах в вашем примере, это не сработает - в моем примере это сработало (но не на FF) – MatiK

Извините, не то, что я знаю. Но если вы измените ширину, до 10% (в процентах от всей строки, а не изображения), в imageContainer в решении, которое я дал, вы получите тот же эффект. Изображения будут изменяться. Добавьте «justify-content: flex-start» в imageContainer, чтобы все изображения собирались слева. – wojjas

Линия, вызывающая проблемы, кажется, «позиция: относительная»; это, вероятно, потому, что flex-box предназначен для позиционирования, а затем внутри него вы пытаетесь установить новое позиционирование. Вы можете экспериментировать, окружая каждый img с помощью div с дисплеем: flex или что-то подобное. – wojjas

Почему установка процент заполнения (и высота) не работают в элементах внутри Flexbox в FF

ответ

Смежные вопросы