This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when width of my children get bigger than the parent, a part of children is not visible.
How can I fix this?
Codepen
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
You just have to change the justify-content to be flex-start
See below.
And if you want the H1 to be centered, just use text-align: center
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
Change the .container{
min-width: 100%}
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 100%;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
Related
I am creating a div which is centered to the window. It's content can grow, and if it grows passed the size of the window, the content div should have it's scrollbar account for the overflow. But instead, the div just grows off the screen and gets clipped. If I set an explicit height on the content, everything works, but since I don't know the explicit height of the environment I cannot do that. What is the correct way to do this?
JSFiddle: https://jsfiddle.net/CodeVirtue/cjhz31xq
Here is the template:
<div class="fullscreen-overlay">
<div class="fullscreen-container">
<div class="window-with-titlebar">
<div class="titlebar">
<div class="titlebar-left">
Left
</div>
<div class="titlebar-right">
Right
</div>
</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40
</div>
</div>
</div>
</div>
And all the CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-overlay {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 12px 12px;
}
.fullscreen-container {
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
}
.titlebar {
background-color: green;
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
}
.titlebar-left {
background-color: darkgreen;
}
.titlebar-right {
background-color: lightgreen;
}
.content {
background-color: blue;
overflow-y: scroll;
max-width: 100%;
max-height: 100%;
}
I believe I was able to achieve what you are looking for by making the parent container use flexbox:
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I'm getting this weird issue with flex-box. See below. I should be able to scroll all the way up and all the way down (in order to see "Middle Top" and "Middle Bottom"). But I am unable to.
After further inspection, Firefox dev tools reveal that .wrapper has some minimum height. And setting min-height: 0 or height: 100% to .wrapper seems to fix the issue. I am wondering why this is? Why do I need to set a height or min height on .wrapper when .middle is set to overflow.
html,
body {
height: 100%;
margin: 0;
}
.flexi {
display: flex;
flex-direction: column;
height: 100%;
}
.flexi>div {
width: 100%
}
.top,
.bottom {
flex-basis: 40px;
min-height: 40px;
}
.top {
background: red;
}
.middle {
flex: 1;
background: green;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.spacer {
display: block;
height: 1000px;
width: 100px;
background: purple;
}
.bottom {
background: blue;
}
<div class="flexi">
<div class="top">
<span>Top</span>
</div>
<div class="middle">
<div class="wrapper">
<span>Middle Top</span>
<span class="spacer"></span>
<span>Middle Bottom</span>
</div>
</div>
<div class="bottom">
<span>Bottom</span>
</div>
</div>
html,
body {
height: 100%;
margin: 0;
}
.flexi {
display: flex;
flex-direction: column;
height: 100%;
}
.flexi>div {
width: 100%
}
.top,
.bottom {
flex-basis: 40px;
min-height: 40px;
}
.top {
background: red;
}
.middle {
flex: 1;
background: green;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper {
min-height: 0; /* why? */
}
.spacer {
display: block;
height: 1000px;
width: 100px;
background: purple;
}
.bottom {
background: blue;
}
<div class="flexi">
<div class="top">
<span>Top</span>
</div>
<div class="middle">
<div class="wrapper">
<span>Middle Top</span>
<span class="spacer"></span>
<span>Middle Bottom</span>
</div>
</div>
<div class="bottom">
<span>Bottom</span>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 4 years ago.
How to avoid a horizontal overflow inside flex column? For instance I have the following markup:
.container {
display: flex;
}
.left, .right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container{
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>
As you can see there are two items inside flex container: a left one is 300px width and a right one that takes all remaining space inside container. And if I'm going to add another fullwidth container inside right flex column it causes horizontal overflow. How to prevent this behavior? Thank you.
Add box-sizing: border-box to .inner-container.
.container {
display: flex;
}
.left,
.right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container {
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
box-sizing: border-box; /* NEW */
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>