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>
Related
I'm having problems with a behavior I have never seen before. I added the code because Stack Overflow is asking me to put it in my post but I would recommend you go on the Codepen to try it for yourself.
HTML:
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
CSS:
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
}
Here is an image with a hand drawn example of the behavior I expect/need: https://i.stack.imgur.com/2tWRH.png
Explanation: I don't want the red background to extend all the way to the X, I simply want it to wrap cleanly around the text of the div.
Just add the minimum content of width to your name class. As far as I know by reading your question I understand that you want to make the red background as it's needed.
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
width: min-content;
padding: 4px;
}
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
I'm working on project which includes a login/register page. It's basically a white div in body which should be centered verticaly and horizontally, but sometimes can be bigger than body.
When div is small everything is okay, but when its bigger than body then I just want it to have small padding on top and bottom.
How can I achieve that ? I have been searching for answer whole day and finally I'm here. Help me people :C
#wrap {
height: 300px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
You can use min-height instead of height and a small top and bottom padding on the wrapper as shown below. When the inner element is higher than the wrapper, it will extend the wrapper and additionally keep the padding .
#wrap {
min-height: 300px;
padding: 10px 0;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
Use min-height instead of height, and add padding to top and bottom. Use box-sizing: border-box to prevent the padding from changing the height:
.wrap {
box-sizing: border-box;
min-height: 300px;
width: 150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
.content {
background: #000;
width: 100px;
height: 400px;
}
/** for the demo **/
.content--small {
height: 100px;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
<div class="wrap">
<div class="content">
</div>
</div>
<!-- for the demo -->
<div class="wrap">
<div class="content content--small">
</div>
</div>
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>
I want to make a box (flex-item in this case) which always stays in the middle of it's container. In that box, there is a header, footer and content section. If the size of the content grows too big in height, I want the content section to be scrollable. The header and footer should always be visible and the box should always stay in it's container.
Here is what I have been able to write:
HTML
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
</div>
<footer>Footer</footer>
</div>
</div>
CSS
body {
margin: 120px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px; /* We can assume that the container's height is hardcoded in this example, but the end solution should work even if this value is changed*/
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
/* It should be possible to scroll this element when it get too big in height*/
background-color: grey;
flex: 1;
}
The code is hosted on JSFiddle: https://jsfiddle.net/9fduhpev/3/
To explain the same thing visually, here is the current situation:
Here is what I want:
Use overflow-y: auto;.
Read this: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
body {
margin: 120px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
background-color: grey;
flex: 1;
overflow-y: auto;
}
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
<br>L
</div>
<footer>Footer</footer>
</div>
</div>
I suggest you give it overflow: auto. With that it will be scrollable when needed.
body {
margin: 20px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
background-color: grey;
flex: 1;
overflow: auto;
}
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
<br>L
</div>
<footer>Footer</footer>
</div>
</div>
I would do something like this:
.content {
height: 100%;
overflow:auto;
background-color: grey;
flex: 1;
}
https://jsfiddle.net/9fduhpev/4/
I have an element with 2 children.
I'm trying to have:
div grow as much as it needs based on 1 of its children
the other always fit the parents height
Thus, I want to avoid setting a height on the parent.
The problem arises when trying to handle overflow of the second child.
Here's the code:
.banner {
display: flex;
background-color: lightblue;
overflow: auto;
border: 4px solid black;
//max-height: 120px; // 1) IF I'M NOT SET THE SCROLL WON'T WORK
}
.constant {
color: white;
flex: 0 0 auto;
width: 200px;
// height: 150px; 2) DISABLED FOR NOW
border: 4px solid yellow;
background-color: olive;
border: 2px solid red;
}
.container {
display: flex;
text-align: center;
}
.main {
max-height: 100%; // 3) I SHOULD STOP MYSELF FROM GROWING MORE THAN MY PARENT
flex: 1;
overflow-y: scroll;
border: 2px solid white;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
flex-wrap: wrap;
}
.main div {
text-align: center;
width: 200px;
height: 80px;
}
.main-side {
flex: 0 0 auto;
color: white;
background-color: grey;
border: 2px solid yellow;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
background-repeat: no-repeat !important;
min-width: 0px;
min-height: 0px;
}
<div class="banner">
<div class="container">
<div class="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightgoldenrodyellow;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<div class="main-side">I've a fixed size</div>
</div>
<div class="constant">I can grow...and my parent should grow if I grow</div>
</div>
If I set a fixed height on .banner everything works out, but I would like to avoid doing so if possible.
jsfiddle
Thank you.