Make flex item have 100% height and overflow: scroll [duplicate]
I want a flex item to take 100% of remaining height and display the overflow: scroll bar. It looks like problem comes from my #userList which takes 100% of the window height and not taking the remaining space .
body < display: flex; flex-direction: column; min-height: 100%; margin:0px; >.wrapper < display: block; flex: 1 1 auto; display: flex; flex-direction: row; / >#chatContainer < background: orange; width: calc(100% - 350px); display: flex; flex-direction: column; >#tabs < background-color: red; flex: 1 1 0px; display: flex; >#usersContainer < flex: 1 1 0; display:flex; flex-direction:column; >#userListWrapper < background-color:pink; flex: 1 1 auto; display:flex; >#userList < -webkit-flex: 1 1 auto; overflow: auto; min-height: 0px; height:100%; >.input
webcam tabs here footer searchInput1 searchInput2 user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2
user1
user2 1 Answer 1
The main problem you are having is a violation of the rules governing percentage heights in CSS.
Basically, when using percentage heights, you must always specify the height of the parent element. Otherwise, the element with a percentage height has no frame of reference, and the height computes to auto (the height of the content).
CSS height property
percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to «auto».
auto
The height depends on the values of other properties.
source: https://www.w3.org/TR/CSS21/visudet.html#propdef-height
So if you plan to use percentage heights, you need to specify a height on every parent element up to the root element ( html ) or up to a fixed height declaration (such as height: 250px ).
In your CSS, you have body < min-height: 100%; >. However, there is no height specified on the parent ( html ).
The following parent elements in your code are missing a height declaration:
With the following adjustments your layout works.
html < height: 100%; >/* NEW */ body < display: flex; flex-direction: column; /* min-height: 100%; */ margin: 0px; height: 100%; /* NEW */ >.wrapper < display: block; flex: 1 1 auto; display: flex; flex-direction: row; height: 100%; /* NEW */ >#chatContainer < background: orange; width: calc(100% - 350px); display: flex; flex-direction: column; height: 100%; /* NEW */ >
It’s also worth mentioning some variations among current browsers.
Percentage Heights: Chrome/Safari vs Firefox/IE
Although the traditional implementation of percentage heights uses the value of the height property, recently some browsers have broadened their scope.
As evidenced in the following posts, Firefox and IE are now also using flex heights to resolve the percentage height of child elements.
Bottom line: Chrome and Safari resolve percentage heights based on the value of the parent’s height property. Firefox and IE11/Edge use the parent’s computed flex height.
For now, the simplest cross-browser solution to this problem would be, in my view, using the height property across the board for percentage heights.
Flexbox 100% height Issue
I have found the following links. but it still doesn’t help me. how to make nested flexboxes work
Height 100% on flexbox column child
How to make flexbox children 100% height of their parent? I need a full page that is responsive, like the following image: 
With header and footer and the middle 5 columns filling the height equally in the remaining space, and then when I do media queries, fill the screen of the mobile device like so: Here’s the code I have so far.
html, body < height: 100%; margin: 0 >.box < display: flex; flex-flow: column; height: 100%; >.box .row < border: 1px dotted grey; >.box .row.header < flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ >.box .row.content < flex: 1 1 auto; >.box .row.footer < flex: 0 1 40px; >.yellow-back < background: #ffe001; >.red-back < background: #e31e25; >.green-back < background: #66af45; >.purple-back < background: #954294; >.containerFull < position: relative; width: 100%; margin: 0 auto; padding: 0;>.containerFull .column, .containerFull .columns < float: left; display: inline; margin-left: 0px; margin-right: 0px; >.containerFull .one-fifth.column header
(sized to content)
Here Here Here Here Here footer (fixed height)
html, body < height: 100%; margin: 0 >.box < display: flex; flex-flow: column; height: 100%; >.box .row < border: 1px dotted grey; >.box .row.header < flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ >.box .row.content < flex: 1 1 auto; >.box .row.footer < flex: 0 1 40px; >.yellow-back < background: #ffe001; >.red-back < background: #e31e25; >.green-back < background: #66af45; >.purple-back < background: #954294; >.containerFull < position: relative; width: 100%; margin: 0 auto; padding: 0; >.containerFull .column, .containerFull .columns < float: left; display: inline; margin-left: 0px; margin-right: 0px; >.containerFull .one-fifth.column
header
(sized to content)
Here Here Here Here Here footer (fixed height)
height 100% in flex
I want to make the content div to fit 100% height. For some reason, the container div happen to be a flex item. Is that appropriate to set 100% height to a div within a flex item? or I should set the content div to be a flex item as well. Also, the flex-direction part is confusing. column do not work, but row do. I suppose the flex-direction only effect on the flex item. jsfiddle here
Hello there html, body < margin: 0; padding: 0; height: 100%; >.wrapper < border: 1px solid red; padding: 20px; min-height: 100%; display: flex; /* change flex-direction from column to row will work */ flex-direction: column; >.container < border: 1px solid green; padding: 20px; flex: 1; >.content
for future reference, use the tag flexbox and css3 instead of flex to call the flex-man experts 😉
2 Answers 2
You can overlap (nest) flex boxes :
html, body < margin: 0; padding: 0; height: 100%; >.wrapper < border: 1px solid red; padding: 20px; min-height: 100%; display: flex; /* change flex-direction from column to row will work */ flex-direction: column; box-sizing:border-box; >.container < display:flex; flex-direction: column;/* up to your needs */ border: 1px solid green; padding: 20px; flex: 1; >.content
You may also mind the box-sizing properties to include borders and padding in size calculation.
box-sizing is sweet 🙂 My confusion is the flex-direction part. Since the green box is 100% height, then why the blue box within can not fit 100% height? Is it an anti-pattern to set 100% height within a flex-item, like the blue box within the green?
@arpeggie height:100% requires an height to be set on the parent to be calculated (it won’t take any reference from min-height either), if none, then it is like 100% of null. Here, in the flexbox context, the thing to use would be the flex propertie. the shorthand flex:1; will do the job and padiing, margin and borders will not mess it up. the container (.content) will fill fill the whole space avalaible. flex drection is here to tell to mind the height.
So flexbox context is totally different with the typical 100% height stuff, I get it. Still, I feel it weird when the container(.content) has some height, (even though that is calculated through flexbox context), while the div within cannot get that height for 100% properly.
@arpeggie it is one of the nice thing about flex, it is flexible and doesn’t require fixed size values to be layed all over its container 😉 . totally what web media is about . have a nice day.
A ding for the use of the word ‘imbricate’, when ‘overlap’ would suffice and be more clearly understood.
Height: 100%; not working with Flex Box
Do you know a solution how it could work without adding a specific height?
.card < margin-bottom: 30px; >.card > .card-header < font-weight: 500; text-transform: uppercase; font-size: 15px; margin-bottom: 6px; >.card > .card-header.light < color: #fff; >.card > .card-body < background-color: #fff; border-radius: 12px; padding: 24px; -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); >.card > .card-body.server-status < display: flex; align-items: center; >.card > .card-body.server-status > .counter < width: 50%; font-weight: 500; color: #95a0b7; font-size: 32px; display: flex; flex-direction: column; align-items: center; >.card > .card-body.server-status > .counter > span
Active Services 7/9 Servers running
3 Answers 3
You need to make it stretch since your flex container is align-items: center
You can remove the height 100%, I added a class to the divider, it comes down to this
If you did not have the align center, it would of worked by default because the align items defaults to stretch but since you changed it to center and your divider has no content so the line does not show. Setting the divider itself to stretch again solves the problem and no need for the extra css
.card < margin-bottom: 30px; >.card>.card-header < font-weight: 500; text-transform: uppercase; font-size: 15px; margin-bottom: 6px; >.card>.card-header.light < color: #fff; >.card>.card-body < background-color: #fff; border-radius: 12px; padding: 24px; -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15); >.card>.card-body.server-status < display: flex; align-items: center; >.card>.card-body.server-status>.counter < width: 50%; font-weight: 500; color: #95a0b7; font-size: 32px; display: flex; flex-direction: column; align-items: center; >.card>.card-body.server-status>.counter>span < font-size: 15px!important; color: #0d2c4a!important; text-transform: capitalize; >.divider
Active Services 7/9 Servers running
В каких случаях работает процентная высота с flexbox’ом?
Обнаружил интересную особенность флексбокса: в большинстве браузеров можно не указывать высоту у элементов в горизонтальном флексбоксе. В следующем примере у section высота не задана, но div растягивается вертикально на всю высоту в IE11, Edge, Chrome и FF. Хотя это и не работает в iOS 9 Safari. https://jsfiddle.net/qy6thr1s/
html, body < height: 100%; margin: 0; >body < display: flex; >section:first-child < flex-grow: 1; background: silver; >div
Однако, если сделать флекс вертикальным, то работать перестаёт — и это известный факт, который «чинится» абсолютным позиционированием. https://jsfiddle.net/qy6thr1s/1/
html, body < height: 100%; margin: 0; >body < display: flex; flex-direction: column; >section:first-child < flex-grow: 1; background: silver; >div
Интересно, что первый вариант с добавленным flex-wrap продолжает работать: https://jsfiddle.net/qy6thr1s/2/
html, body < height: 100%; margin: 0; >body < display: flex; flex-wrap: wrap; >section:first-child < flex-grow: 1; background: silver; >div < height: 100%; background: antiquewhite; >section:last-of-type
1 ответ 1
NB. Ответ не претендует на академическую точность.
Переключая flex-direction между column и row мы переключаем главную ось, соответственно, внимание к контенту также переключается с width на height . Сразу приведу пример:
html < height: 100%; >body < display: flex; height: 100%; >section < background-color: lightblue; >section:first-child div < background-color: red; >div < width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ >
Здесь ширина, имеющая значение 100% никак не применяется.
Теперь просто поменяем flex-direction :
html < height: 100%; >body < display: flex; flex-direction: column; height: 100%; >section < background-color: lightblue; >section:first-child div < background-color: red; >div < width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ >
Теперь можно увидеть обратный результат: 100%-ная ширина контента применилась, а 100%-ная высота — нет.
Однако, так мы меняем только поведение флексбокса, поведение самого дива не меняется — он все еще следует правилам блочного контекста форматирования, а именно занимает все доступное место по ширине и минимальное по высоте.
Теперь постараюсь ответить на сам вопрос. При смене главной оси с X на Y, у флексбокса теряется привязка к определенной в его свойствах высоте, а значит внутреннему диву не на что сослаться, если задать ему height: 100% . Решить это можно при помощи определения высоты у непосредственного потомка при помощи flex-basis или height .
html < height: 100%; >body < display: flex; flex-direction: column; height: 100%; >section < background-color: lightblue; flex-basis: 100%; /* height: 50%; */ >section:first-child div < background-color: red; >div < width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ >
Свойство-значение flex-wrap: wrap никак не влияет на расчет размеров, поскольку не меняется главная ось.
With header and footer and the middle 5 columns filling the height equally in the remaining space, and then when I do media queries, fill the screen of the mobile device like so: 
Here’s the code I have so far.