Is it possible to make a div with a height of 100%, and have the inner item that overflows scroll.
It sounds like a simple problem (and it might be), but I have been thinking about it for days. Some things that don't work in my specific case are:
height: calc(100% - xx px), because the header is of a variable height.
Putting all high children as direct children in the wrapper component (I use a component that has some layers
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with-many">
Don't scroll
<div class="divs">
Scroll
</div>
</div>
</div>
</div>
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
* {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
.with-many {
height: 100%;
overflow-y: auto;
background-color: green;
.divs {
height: 400vh;
background-color: blue;
}
}
}
}
https://jsfiddle.net/zdb8pmuL/1/
Do you mean like this?:
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
}
.wrapper * {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
display: flex;
flex-direction: column;
}
.with {
height: 100%;
background-color: green;
}
.another-wrapper {
overflow-y: scroll;
height: 100%;
}
.divs {
height: 400vh;
background-color: blue;
}
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with">
With many
<div class="another-wrapper">
<div class="divs">
nested divs
</div>
</div>
</div>
</div>
</div>
Related
I need to place block with overflowed content inside flex column (flex-grow:1) and not to break parent wrapper max-width.
Im unable to change flex styles (so I cant set flex column min-width:0), Im able to edit only the content inside flex column.
Any thoughts?
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
/* min-width: 0; */
}
.overflow {
max-width: 100%;
overflow: auto;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
Use min-width: 100%;width: 0; on the overflow element:
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
}
.overflow {
min-width: 100%;
overflow: auto;
width: 0;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
This is sort of a two in problem.
I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.
I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.
.main {
height: 20vh;
}
.outer {
display: flex;
overflow: hidden;
}
.innerLeft {
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width: 100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you.
You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
Remove height from innerleft and innerright element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/
body {
margin: 0;
}
.main {
height: 100vh;
}
.outer {
display: flex;
height: calc(100vh - 19px);
overflow: hidden;
}
.innerLeft {
width: 50px;
background-color: green;
}
.innerRight {
overflow: auto;
background-color: red;
width: calc(100% - 50px);
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
You need to set height to outer class.
.main {
height: 20vh;
}
.outer {
display: flex;
height: 200px;
overflow:hidden;
}
.innerLeft {
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width:100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Let's say I have a parent <div> with a fixed height and with flex item children.
Is there a way to have its children height not fixed but extending depending on their content ?
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: 100%;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Wanted result :
You don't need to use fit-content (which is not supported in Firefox: https://caniuse.com/#feat=mdn-css_properties_height_fit-content), you simply need to disable the stertch effect by adding align-self:flex-start; to the needed element
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
align-self:flex-start;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Is there a way to have its children height not fixed but extending depending on their content ?
If you want a div to be as high as it content needs, you can apply height: fit-content; on that div.
Example in the snippet below (for the left column):
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: fit-content;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}