Как сжимать коробки вдоль поперечной оси гибкой макета с помощью стержней прокрутки (ошибка Firefox?) ⇐ CSS

[Anonymous]

Рассмотрим следующую разметку, которая также доступна через эту скрипку: < /p>

Код: Выделить всё

Flex Box Test

* {
box-sizing: border-box;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: clip;
}
header,
div {
border-width: 6px;
border-style: solid;
text-align: center;
overflow: clip;
}
header,
#content,
#footer {
padding: 1em;
}
header {
border-color: #090;
background-color: #0c0;
color:  #030;
flex: none;
}
#application_container {
border-color: #c90;
background-color: #fc0;
color:  #330;
flex: auto;
display: flex;
flex-direction: row;
}
#sidebar {
border-color: #ccc;
background-color: #fff;
color:  #999;
flex: none;
width: 150px;
}
#workbench_container {
border-color: #f3f;
background-color: #f6f;
color:  #939;
flex: auto;
display: flex;
flex-direction: column;
overflow: clip auto;
}
#content_container {
border-color: #36c;
background-color: #69f;
color:  #039;
flex: 1 0 auto;
}
#content {
border-color: #900;
background-color: #c00;
color:  #300;
}
#content.small {
min-height: 150px;
}
#content.large {
min-height: 1500px;
}
#footer {
border-color: #999;
background-color: #ccc;
color:  #333;
flex: none;
}



The header shall always be visible at the top

This is the sidebar




This is the real content whose size is unknown in advance.
Hence, it is wrapped into a content container which is at least as large as the actual content,
but can grow such that the footer is at the bottom.



For small content the footer shall be located at the bottom.
But for large content the footer shall be placed at the end of the content and be scrolled as part of the (pink) workbench container.

, который должен дать вам следующую компоновку Box

Зеленый загон на вершине, а левая сторона всегда остается в их фиксированной позиции. Область прокрутки должна быть розовой коробкой (называемой workbench_container в коде). Пока содержание мало, они нижний колонтитул (серая коробка) должны быть размещены в нижней части обзорной области, как показано на снимке экрана. Но если содержание становится больше, нижний колонтитул должен прокручивать как часть розовой коробки. Но это не работает для Firefox. Чтобы проверить это, переключите класс Div#Content между Small и большим . Firefox не ограничивает высоту розовой коробки, но высота розовой коробки растет вместе со своими детьми (то есть содержание и нижний колонтитул). Следовательно, не появляется прокрутка. Добавление < /p>

Код: Выделить всё

#workbench_container {
height: 200px;
}
< /code>
создает прокрутку.  Но, очевидно, это не решение, так как я не знаю высоту заранее. Если я устанавливаю высоту: 100%

ничего не изменится. Согласно спецификациям CSS, это должно назначить высоту ближайшего, позиционированного предка, который является #приложение-container .
это ошибка Firefox или я что-то упускаю? Как заставить это работать в кросс-браузера совместимым? Если это ошибка Firefox, как мне обойти эту ошибку? 293px


Однако в плохом случае без пространства, мы получаем

• 
  . 275px < /li>
  Гибкость (элемент сжинай): -18px < /li>
  Минимальный размер: 275px < /li>
  Окончательный размер: 275px
  Другими словами, коробка не сжимается (почему? /> < /p>
  Дополнительные ограничения: < /p>
  
  Размер футерея не известен в нем, и он показывает линии, и он имеет линии. В противном случае (если размер будет известен), я мог бы представить обходной путь с использованием CSS Calc , который здесь не является вариантом.

Подробнее здесь: https://stackoverflow.com/questions/740 ... -bars-fire