I have a "boxHeader" which height is fixed to 64px and a "boxcontent" which I want height to be fixed to the remaining space.
My problem: if the height of the children in the "boxContent" exceed the height of the remaining space, it will also increase the height of "boxContent". And I don't want that, I want the children of "boxContent" to respect the max size (and add scroll)
Edit: The children inside "boxContent" are React Components, I have a "Sider" of Ant Design containing multiple Panel's Collapse AND I have a Content side by side. I want to add a scroll bar on the Sider AND on the Content so both Sider and Content have overflow-y: auto
Can you help me ?
Here the code
<div id="container">
<div id="boxHeader">
<HeaderArea />
</div>
<div id="boxContent">
{...}
</div>
</div>
#container {
display: flex;
flex-flow: column;
height: 100% !important;
min-height: 100% !important;
#boxContent {
/* height: calc(100vh - 64px); this works, but i don't want to calcule the size*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
#boxHeader {
flex: 0 0 64px;
}
body{
height: 100vh; /*100% is also tested*/
}
You can give #boxContent max-height and overflow-y: scroll with these two I think it is going to work. But If it is not can you add your HTML so that I can look and fix it. I hope this line of code fixes your problem.
#boxContent {
max-height:300px; //(for example)
overflow-y: auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
I am trying to implement a responsive sidebar, that changes to a fixed height header when there is not enough horizontal space.
The following code works, except that I'm unable to make the second flex line stretch and occupy maximum space, while giving the first line the minimum space needed.
As per the spec (https://www.w3.org/TR/css-flexbox-1/#flex-lines):
In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.
But I seem to be missing something, because the available vertical seem to be equally shared by the flex lines.
I tried giving .bar min-hieght: 5em, but it is still occupying half of the height when wrapping occurs.
Is it impossible to implement without using media queries?
Code:
body {
background: yellow;
color: white;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bar {
background: grey;
margin: 0;
padding: 1em;
min-width: 15em;
min-height: 5em;
flex-grow: 1;
}
.content {
background: darkgrey;
margin: 0;
padding: 1em;
flex-grow: 999;
flex-shrink: 1;
flex-basis: 40em;
}
<aside class="bar">
<h1>Bar</h1>
</aside>
<main class="content">
<h1>Content</h1>
</main>
JsFiddle: https://jsfiddle.net/074r8nhs/31/
https://jsfiddle.net/wqmm0kxb/5/
html:
<div class="full">
<header><h1>header stuff</h1></header>
<section>
<div>
{lots and lots of content}
</div>
<div>b</div>
<div>c</div>
</section>
</div>
css:
.full {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
header {
flex: 78px 0 0;
background: #ececec;
color: black;
padding-left: 33px;
}
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
}
My outer container, '.full', takes up the full width and height of the screen, and uses display:flex to make sure that the header + section children stretch to take up all the space beneath them.
Now, what I want is naturally for the header to take up 78px and the section to take up {full height - 78px} -- but without doing anything like calc preferrably. And I want to be able to scroll in the div children of section, without scrolling affecting the other divs or the page as a whole.
This works perfectly in Chrome, but open up my fiddle in firefox, edge, ie and it doesn't work as expected. Section gets the height of {lots and lots of content} rather than only taking the remaining space of '.full'
What should I do to achieve the Chrome-like layout that I'm expecting?
Apply the overflow-y:auto for your section also, that will fix the issue in IE and Firefox.
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
overflow-y: auto;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
Fiddle DEMO
I want to build a column layout with a menu, then a header, then a content container using flexboxes.
I know how to build it in other techs using fixed sizes, calc etc... But have troubles with flexboxes.
Here is a JsFiddle
I have this:
<div class="layout">
<div class="menu">
Menu
</div>
<div class="header">
Header
</div>
<div class="content">
<div class="scrollable-content">
...
</div>
</div>
</div>
.layout {
overflow: hidden;
border: solid;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.menu {
overflow: hidden;
border: solid red;
flex-grow: 0;
flex-shrink: 0;
}
.header {
overflow: hidden;
border: solid green;
flex-grow: 0;
flex-shrink: 0;
}
.content {
overflow: hidden;
border: solid blue;
flex-grow: 1;
flex-shrink: 1;
}
.scrollable-content {
overflow: auto;
height: 100%;
width: 100%;
}
As you can see on the JsFiddle, with this code, the .scrollable-content is actually never scrollable, because even while using height: 100% it becomes much larger than his parent div. How can I constrain that div's height to the parent's height?
Note: I know I could put the overflow: auto to the parent .content directly, but for reasons specific to my app I really don't want to: please only submit solutions that do not modify the html structure or change the scrollable container because I already know these solutions. I'm more interested to learn why my approach did not work and how it could be fixed (or not?)
Obviously the content that can be scrolled has a dynamic height and is not a fixed value of 450px like in my JsFiddle.
You could remove height: 100% from .scrollable-content, and then change the display of .content to flex:
Updated Example
.content {
overflow: hidden;
border: solid blue;
flex-grow: 1;
flex-shrink: 1;
display: flex;
}
.scrollable-content {
overflow: auto;
width: 100%;
}
You're missing a height: 100% on .content.
Since you're using percentage heights, you need to specify a height for all parent elements of the .scrollable-content.
For a more detailed explanation see: Working with the CSS height property and percentage values
You are almost there.
.content {
overflow: hidden;
border: solid blue;
flex-grow: 1;
flex-shrink: 1;
height:450px; //adjust accordingly.
}
The scroll activates once a height a limited height has been reached. In your case since you have the scrollable area limited to the parent's (content) height, you did right by giving it height: 100%....but....100% of what?
So, all you need is give the content class a stopping point. change the 450px to whatever is more suitable. If you are trying to cover for a gap below that content then the next item should be positioned absolute bottom. (just in case that is what you are tying to get to) I've seen this approach many times and that is usually what follows :)
Here is your updated jfiddle
How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question.
The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs.
I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do.
Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).
New way I've just stumbled upon: css calc():
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Source: css width 100% minus 100px
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
While Guffa's answer works in many situations, in some cases you may not want the left and/or right pieces of padding to be the parent of the center div. In these cases, you can use a block formatting context on the center and float the padding divs left and right. Here's the code
The HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
The CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
I feel that this element hierarchy is more natural when compared to nested nested divs, and better represents what's on the page. Because of this, borders, padding, and margin can be applied normally to all elements (ie: this 'naturality' goes beyond style and has ramifications).
Note that this only works on divs and other elements that share its 'fill 100% of the width by default' property. Inputs, tables, and possibly others will require you to wrap them in a container div and add a little more css to restore this quality. If you're unlucky enough to be in that situation, contact me and I'll dig up the css.
jsfiddle here: jsfiddle.net/RgdeQ
Enjoy!
You can make use of Flexbox layout. You need to set flex: 1 on the element that needs to have dynamic width or height for flex-direction: row and column respectively.
Dynamic width:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
Dynamic height:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
The usual way to do it is as outlined by Guffa, nested elements. It's a bit sad having to add extra markup to get the hooks you need for this, but in practice a wrapper div here or there isn't going to hurt anyone.
If you must do it without extra elements (eg. when you don't have control of the page markup), you can use box-sizing, which has pretty decent but not complete or simple browser support. Likely more fun than having to rely on scripting though.
Maybe I'm being dumb, but isn't table the obvious solution here?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
Another way that I've figured out in chrome is even simpler, but man is it a hack!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
This alone should fill the rest of the line horizontally, as table-cells do. However, you get some strange issues with it going over 100% of its parent, setting the width to a percent value fixes it though.
We can achieve this using flex-box very easily.
If we have three elements like Header, MiddleContainer and Footer. And we want to give some fixed height to Header and Footer. then we can write like this:
For React/RN(defaults are 'display' as flex and 'flexDirection' as column), in web css we'll have to specify the body container or container containing these as display: 'flex', flex-direction: 'column' like below:
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
what if your wrapping div was 100% and you used padding for a pixel amount, then if the padding # needs to be dynamic, you can easily use jQuery to modify your padding amount when your events fire.
I had a similar issue where I wanted a banner across the top of the screen that had one image on the left and a repeating image on the right to the edge of the screen. I ended up resolving it like so:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
The key was the right tag. I'm basically specifying that I want it to repeat from 131px in from the left to 0px from the right.
In some contexts, you can leverage margin settings to effectively specify "100% width minus N pixels". See the accepted answer to this question.