I need to avoid the overlapping of the div's when the browser window is shrinked vertically in the following piece of code:
`
<html>
<body>
<style>
#box {
display: flex;
flex-direction: column;
align-items: center;
}
#top {
background-color: red;
height: 560px;
width: 400px;
}
#bottom {
background-color: green;
height: 100px;
width: 400px;
position: absolute;
bottom: 0
}
</style>
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<body>
</html>
`
Why are the div's getting overlapped. is there a way that this overlapping can be avoided and having the same initial structure? The bottom div acts as a footer in the real scenario. Thanks in advance!
Use min-height on the box, remove absolute positioning from the bottom and both div's heights will be kept.
When the margin-top: auto is set on a flex column item, it will push it to the bottom of is parent, which you can see on bigger screens.
body {
margin: 0;
display: flex; /* IE bug fix */
}
#box {
flex-grow: 1; /* fill body's width */
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
#top {
background-color: red;
height: 560px;
width: 400px;
border: 1px solid black;
}
#bottom {
margin-top: auto; /* push it to the bottom on big screen */
background-color: green;
height: 100px;
width: 400px;
border: 1px solid black;
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
If they at some point they need to shrink, with this sample the red div does, where the height is fixed to full viewport.
It works like that, that the green is given flex-shrink: 0, which prevent it from shrink and keep its set height.
html, body {
margin: 0;
}
#box {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
#top {
background-color: red;
height: 560px;
width: 400px;
border: 1px solid black;
}
#bottom {
margin-top: auto;
flex-shrink: 0;
background-color: green;
height: 100px;
width: 400px;
border: 1px solid black;
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
You need to set position: relative; to parent, in this case to body element, it will solve the issue. When the parent's position is relative, and the child's position is absolute, the child will respect parent and will be positioned relatively to the parent:
body {
position: relative;
}
#box {
display: flex;
flex-direction: column;
align-items: center;
}
#top {
background-color: red;
height: 560px;
width: 400px;
}
#bottom {
background-color: green;
height: 100px;
width: 400px;
position: absolute;
bottom: 0
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
Related
I'm trying to make a container with side-by-side divs, one item has a fixed width and the other item has a fixed height. However, the flexible-height div won't shrink below its contents.
.parent {
background: #f00;
display: contents;
}
.container {
background: #0f0;
width: 25vw;
display: flex;
}
.object {
background: #00f;
margin: 10px;
width: 100px;
flex-shrink: 0;
}
.object.flexes-main-axis {
flex-grow: 1;
flex-shrink: 1;
}
.object.sets-cross-axis-size {
height: 75px;
}
.object.shrinks-cross-axis-below-content {
overflow-y: auto;
}
.child {
background: #f0f;
height: 100px;
width: 100px;
}
<div class='parent'>
<div class='container'>
<div id="object1" class='object flexes-main-axis sets-cross-axis-size'></div>
<div id="object2" class='object shrinks-cross-axis-below-content'>
<div class="child"></div>
</div>
</div>
</div>
I'm trying to get object2 to shrink and show a vertical scroll bar when I shrink object1 below 100px. The magenta box represents fixed-height content I can’t shrink, while object1 represents the element I want to control the container’s height.
The blue is hardcoded 75px tall, while the magenta is hardcoded 100px.
As the main .container has no height set it will grow to fit the tallest child. A main .container with a fixed height: ..px would still not make .child shrink. That's Flexbox.
But, if you set the .child to height: 100% and you will see it shrink:
* { outline: 1px dashed } /* for debugging */
.parent {
background: #f00;
display: contents;
}
.container {
background: #0f0;
width: 25vw;
display: flex;
}
.object {
background: #00f;
margin: 10px;
width: 100px;
flex-shrink: 0;
}
.object.flexes-main-axis {
flex-grow: 1;
flex-shrink: 1;
}
.object.sets-cross-axis-size {
height: 75px;
}
.object.shrinks-cross-axis-below-content {
overflow-y: auto;
}
.child {
background: #f0f;
height: 100%; /* Changed from 100px */
width: 100px;
}
<div class='parent'>
<div class='container'>
<div id="object1" class='object flexes-main-axis sets-cross-axis-size'>1</div>
<div id="object2" class='object shrinks-cross-axis-below-content'>
<div class="child">2</div>
</div>
</div>
</div>
So, I figured it out. I needed to add an extra wrapper div between object2 and child with height set to 0. Object2 will scroll to accommodate child overflow, but child's height won't count toward object2's content as far as the flexbox is concerned. Now as you change object1's height below child's height, you'll get a scroll bar in object2.
Also in this version, I made object1 responsive to the viewport width, so you can try it out by resizing the browser window.
.container {
display: flex;
background-color: red;
padding: 10px;
width: 50vw;
}
.sizecontroller {
aspect-ratio: 16 / 9;
background-color: blue;
padding: 10px;
flex-grow: 1;
flex-shrink: 1;
align-self: flex-start;
}
.sizeresponsive {
overflow-y: auto;
background-color: green;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.sizeeraser {
height: 0;
background-color: purple;
padding: 10px;
}
.sizefixed {
width: 25px;
height: 250px;
background-color: yellow;
padding: 10px;
}
<div class="container">
<div class="sizecontroller"></div>
<div class="sizeresponsive">
<div class="sizeeraser">
<div class="sizefixed"></div>
</div>
</div>
</div>
I'm trying to center a circle in another circle using 2 divs. And I noticed that at some zoom levels the width and the height shown in browser are different from what I specified. I have a 50px x 50px div and after zoom sometimes it gets smth like 49.992 x 49.992.
.outer {
position: relative;
width: 100px;
height: 100px;
background: #7154d4;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: #ff00ff;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
div {
border-radius: 50%;
}
<div class="outer">
<div class="inner"></div>
</div>
Is this something normal or is there a way to not let this happen?
Tested on Chrome and Firefox.
Here is a testing link: https://codepen.io/StefanAlif/pen/RwMwrMj
Remove margin-left:auto and margin-right:auto from .inner class
and
Add position:absolute to .inner class
This will work.
.outer {
position: relative;
width: 100px;
height: 100px;
background: #7154d4;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: #ff00ff;
width: 50px;
height: 50px;
position: absolute;
}
div {
border-radius: 50%;
}
<div class="outer">
<div class="inner"></div>
</div>
I have a navbar with a fixed height, underneath a control div with also a fixed height and below that I have another div calendar. calendar is scrollable. I want the calendar height to have the remaining screen height below control and the bottom of the screen. This way the window is not scrollable, only the calendar is scrollable. However setting height: 100% does not work and flex: 1 neither.
This is what I have when I set the height of calendar to a fixed height but as I explained I want the height to be the rest of the screen size.
Any Idea?
.navbar {
height: 50px;
background-color: indianred;
}
.window {
display: flex;
flex-direction: column;
flex: 1;
}
.control {
height: 100px;
background: khaki;
}
.calendar {
height: 200px;
width: 100%;
bottom: 0;
left: 0;
}
.wrapper {
position: relative;
background-color: lightgray;
width: 100%;
height: 100%;
overflow: scroll;
}
.main {
width: 1500px;
height: 1500px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
<nav class="navbar"></nav>
<div class="window">
<div class="control">
</div>
<div class="calendar">
<div class="wrapper">
<div class="main">
</div>
</div>
</div>
</div>
Run this Code below:
I used height: calc() method full height of the screen minus 150px for nav and controls.
.navbar {
height: 50px;
background-color: indianred;
}
.window {
display: flex;
flex-direction: column;
flex: 1;
}
.control {
height: 100px;
background: khaki;
}
.calendar {
height: calc(100vh - 150px);
width: 100%;
bottom: 0;
left: 0;
}
.wrapper {
position: relative;
background-color: lightgray;
width: 100%;
height: 100%;
overflow: scroll;
}
.main {
width: 1500px;
height: 1500px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
<nav class="navbar"></nav>
<div class="window">
<div class="control">
</div>
<div class="calendar">
<div class="wrapper">
<div class="main">
</div>
</div>
</div>
</div>
I would like to create a container div wrapping another div that scrolls and has an equal margin around all sides. The issue is the margin setting is not being reflected on the right side and the .inner div only scrolls to the end of the width setting.
I have read other posts and found it may be related to the way the width is being set but am unable to get the css quite right for my case.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
I've tried to use padding in .outer and also various width settings including calc(x% - ypx)
I would like to be able to set the width of the container .outer so that it is not 100% of the page.
Any help is much appreciated!
I have just added overflow:inherit in inner div css.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
overflow:inherit;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
The inner element has a min-width greater than the available horizontal space provided by the container. I've removed this attribute. Please review the snippet below.
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
<div class='outer'>
<div class='inner'></div>
</div>
UPDATE
As pointed out by the OP, if a fixed width is used for the inner element, than as you scroll to the right, no right margin is displayed. I did a bit of a trick and faked a right-margin by setting a right-border on the inner element, as follows:
.outer {
height: 400px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-width: 800px;
min-height: 360px;
margin: 12px;
background-color: green;
border-right: 12px solid white;
}
<div class='outer'>
<div class='inner'></div>
</div>
Setting .inner to display:inline-block achieves the desired behaviour.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
display: inline-block;
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
So I have a flexbox but I'm having trouble understanding why the first child's padding gets ignored when the second child's content overflows.
here's an example when the second child's content aren't overflowing.
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 10vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
Here's an example when the child's content are overflowing
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 100vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
you can see in the second example that the title's height has greatly reduced.
It's because you're using flex css, which tries to accommodate all the children. If the title is supposed to not change in size no matter what, you need to set its flex-shrink to 0.
So try changing the css to:
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
flex-shrink: 0;
}