Chrome игнорирует гибкую основу в расположении столбцов

У меня возникли проблемы с тем, что Chrome обратит внимание на гибкую основу flex: 1 1 25% в макете flex-direction: column. Он отлично работает в макете row.

Ниже представлен фрагмент ниже: желтые, синие и розовые полосы имеют гибкую основу 50px, 25% и 75%, как показано в обоих направлениях.

Если вы запустите его в Firefox (или IE11 или Edge), то столбец и строка разделите область как ожидалось:

Скриншот Firefox

Но если вы запустили его в Chrome (47) или в Safari (9.0.3), расположение столбцов слева, похоже, полностью игнорирует флеш-основу - высота баров, похоже, не имеет отношения к flex -базис:

введите описание изображения здесь

Единственное различие между левым и правым - это flex-direction.

.container {
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;
}

.layout {
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}

.exact {
  flex: 1 1 50px;
  background: #ffc;
}
.small {
  flex: 1 1 25%;
  background: #cff;
}
.large {
  flex: 1 1 75%;
  background: #fcf;
}
<div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>

Ответы

Ответ 1

Три вопроса для рассмотрения:

  • Сумма всех высот более 100%

    В макете .column у вас есть три элемента гибкости. Их высота 75% + 25% + 50px. Это само по себе превышает применяемый height: 100%. Это не вызывает переполнение, потому что у вас flex-shrink установлено значение 1.

  • Маргинальное пространство

    Вы указали margin: 10px для обеих макетов. Таким образом, есть дополнительные 20px высоты от верхнего и нижнего полей. В макете .column это действительно вызывает переполнение в Chrome.

    Отрегулируйте для этих дополнительных 20px, и переполнение прошло:

    .column {
  flex-direction: column;
  height: calc(100% - 20px);   /* new */
}


    .container {
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;
}

.layout {
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
  height: calc(100% - 20px);   /* NEW */
}

.exact {
  flex: 1 1 50px;
  background: #ffc;
}
.small {
  flex: 1 1 25%;
  background: #cff;
}
.large {
  flex: 1 1 75%;
  background: #fcf;
}
    <div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>