Различное поведение браузера для ширины вложенных контейнеров flexbox

Question

Различное поведение браузера для ширины вложенных контейнеров flexbox

0

Я изо всех сил пытаюсь получить одинаковое поведение для макета flexbox в разных браузерах (никогда не просматривайте браузеры, которые не поддерживают flexbox).

Здесь разметка:

<!-- nested version -->
<div class="flex-container"> <!-- display: flex -->
  <div>
    <div class="flex-container inner"> <!-- display: flex -->
      <div class="auto-width">
        auto take up needed space
      </div>
      <div class="flex-width"> <!-- flex: 1 -->
        flex take up remaining space
      </div>
    </div>
  </div>
</div>

Моя проблема в том, что IE11 ведет себя по-разному с Firefox и Chrome. Я ожидал бы, что ширина вложенного flexbox flex-container.inner будет неограниченной, так как теперь я устанавливаю любую ширину.

Вот пример JSBin, чтобы проиллюстрировать проблему: http://jsbin.com/pabesaci/5. Пример 3 - проблематичный, который по-разному влияет на IE.

Рендеринг в IE

Рендеринг в Chrome (FF похож)

Это ошибка в IE?

Можете ли вы предложить другие способы достижения этой схемы?

Bjarke 04 апр. 2014, в 15:06

Источник

0

Вы имеете в виду, как это ?
Laniakea 04 апр. 2014, в 13:36
0

@MartinMetsalu ну, не совсем, внутренний flex-контейнер должен расти только настолько, насколько этого требуют его дочерние элементы (это не было ясно из моих скриншотов, но это поведение FF и Chrome)
Bjarke 04 апр. 2014, в 14:51
0

как насчет сейчас ?
Laniakea 04 апр. 2014, в 15:47
0

Если вы еще не используете его, загляните в Normalize.css
fnostro 04 апр. 2014, в 16:13

Показать ещё 2 комментария

Теги:

html

css

flexbox

1 ответ

Ещё вопросы

@MartinMetsalu ну, не совсем, внутренний flex-контейнер должен расти только настолько, насколько этого требуют его дочерние элементы (это не было ясно из моих скриншотов, но это поведение FF и Chrome)
Если вы еще не используете его, загляните в Normalize.css

Laniakea · Accepted Answer · 2014-04-04T13-49-00.000Z

<p>My example:</p>

<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
  <div>
    <div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
      <div style="float:left; display: block; border: solid 2px green;">
        auto take up needed space
      </div>
      <div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
       flex take up remaining space
      </div>
    </div>
  </div>
</div>

он конкретно говорит: «Можете ли вы предложить другие способы достижения этого макета?»
Спасибо, @MartinMetsalu. Я приму это как ответ. Я надеялся на решение с использованием flexbox, но это придется делать, когда браузеры ведут себя не так