I have 2 divs inside a parent:
<div class="parent">
<div class="foo1"></div>
<div class="foo2"></div>
</div>
foo1 will have a dynamic height, so I can't use the style below:
height: calc(100% - foo1Height);
Now, what I want to do is make sure that the lower child foo2 never expands outside of the parent div, and to show the scrollbar if it gets too big. I would prefer CSS only solutions.
You can either use flexbox. no markup changes.
.parent {
display: flex;
flex-direction: column;
height: 100px;
}
.foo2 {
flex: 1; /*expand to fit*/
background: silver;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">1</div>
<div class="foo2">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
Or use CSS table, additional markup is required.
.parent {
display: table;
width: 100%;
height: 100px;
}
.foo1, .foo2 {
display: table-row;
}
.cell {
display: table-cell;
position: relative;
}
.foo2 {
height: 100%; /*expand to fit*/
background: silver;
}
.scroll {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">
<div class="cell">1</div>
</div>
<div class="foo2">
<div class="cell">
<div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
</div>
</div>
Related
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I have the following divs below:
.parent {
padding: 10px;
background: grey;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
left: 0px;
}
.three {
left: 200px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
This looks like the following:
I would like divs 1 and 2 to stack as they do, but since div3 does not collide with the divs above, I'd like it to vertically aline with div 1.
If I switch display to inline or inline-block, it pushes div 2 to the right of div one. and the left values are not accurate to the parant.
The left values of the divs will be dynamically generated so I cannot know if the divs are overlapping or not.
Is this possible?
Edit: If you really want to align the 3rd div using positioning, then you can do it like so:
.parent {
padding: 10px;
background: grey;
position: relative;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
position: relative;
left: 0px;
}
.three {
position: absolute;
left: 200px;
top: 10px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
You can use the column-count property like so:
.parent {
padding: 10px;
background: grey;
column-count: 2;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Or you can use flexbox to wrap vertically, like so:
.parent {
padding: 10px;
background: grey;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Here's using grid:
.parent {
padding: 10px;
background: grey;
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Try this :
wrap div3 item in another div and give it a class property of flex-container.
.flex-container {
align-content: flex-start;
}
Ensure the flex direction is horizontal.
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>
I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?
jsfiddle
HTML:
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
CSS:
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
}
#left {
background: red;
width: 50;
}
#right {
background: green;
flex: 1;
}
This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.
Take a look to this answer
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
position: relative;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#left {
background: red;
width: 50px;
}
#right {
background: green;
flex: 1;
}
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2, like on the picture.
This is what I've tried, but the "child" div sticks to the top :
#parent {
position: relative;
}
#child {
position: absolute; bottom: 0;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">
</div>
<div id="grandchild_2">
</div>
</div>
</div>
Anyone knows how I should proceed ? Thanks !
If you specify a height on the parent it will stick to the bottom.
Example: http://codepen.io/anon/pen/wGqzVd
HTML
<div id="parent">
Parent
<div id="child">
Child
<div id="grandchild_1">
Grandchild 1
</div>
<div id="grandchild_2">
Grandchild 2
</div>
</div>
</div>
CSS
div {
padding: 5px;
}
#parent {
position: relative;
background: lightgray;
height: 200px;
width: 150px;
}
#child {
position: absolute;
bottom: 5px;
background: yellow;
}
#grandchild_1 {
background: pink;
}
#grandchild_2 {
background: lightblue;
}
The provided code works as is...assuming that the parent has a height greater than that of the child.
#parent {
position: relative;
height: 200px;
background: pink;
}
#child {
position: absolute;
width: 100%;
bottom: 0;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
As an alternative to positioning, flexbox can do the same...and the child will affect the height of the parent which an absolutely positioned child cannot.
#parent {
position: relative;
height: 200px;
background: pink;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#child {
width: 100%;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>