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>
Related
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I would like to build a "grid"/"table" using flexbox which has 2 rows and 2 columns. In the two items of the left column I want the text to be aligned to the left while in the two items of the right column I want the text to be centered. As easy as it seems to be, I cannot figure out how to achieve this goal using flexbox. I would be very delighted if someone could provide a small example on how to do this.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.flex {
display: flex;
}
.container {
position: relative;
width: 350px;
height: 350px;
border: 1px solid red;
}
.column {
position: relative;
width: 100%;
height: 100%;
padding: 2rem;
display: flex;
flex-direction: column;
background-color: pink;
}
.column:nth-child(2) {
background-color: coral;
}
.column:nth-child(2) .box {
text-align: center;
/* if you also want to align text vertically center */
/* display: grid;
place-items: center; */
}
.column .box {
width: 100%;
height: 100%;
background-color: lightgreen;
}
.column .box:not(:first-of-type) {
margin-top: 2rem;
}
<div class="container flex">
<div class="column">
<div class="box">
aligned left
</div>
<div class="box">
aligned left
</div>
</div>
<div class="column">
<div class="box">
aligned center
</div>
<div class="box">
aligned center
</div>
</div>
</div>
If you also want to align text vertically center add the below mentioned code inside .box.
/* grid method */
display: grid;
place-items: center;
/* flex method */
display: flex;
align-items: center;
justify-content: center;
CSS:
.container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid red;
flex-wrap: wrap;
box-sizing:border-box
}
.container div {
width: 50%;
height: 100px;
border: 1px solid green;
box-sizing:border-box
}
.container .box1,
.container .box3{
text-align: left
}
.container .box2,
.container .box4{
text-align: center
}
HTML:
<div class="container">
<div class="box1">sample text</div>
<div class="box2">sample text</div>
<div class="box3">sample text</div>
<div class="box4">sample text</div>
</div>
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:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
Here's my example code:
#parent {
display: flex;
height: 350px;
background: yellow;
}
#wrapper {
flex: 1;
display: flex;
flex-flow: row wrap;
margin: 0 10%;
background: #999;
}
#top {
flex: 1 100%;
height: 50px;
margin-top: 10px;
background: red;
}
#left {
width: 30%;
height: 150px;
margin: 10px 10px 0 0;
background: blue;
}
#right {
flex: 1;
margin: 10px 0 0 0;
background: green;
}
<div id="parent">
<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</div>
As you can see, there's a gap (big gray area) between top (red) and left/right (blue/green). Flexbox seems to be spreading everything equally in parent element (gray).
However, I don't want the gap between my elements, I need everything to "rise" to top. There can be a gap after all elements (at the end).
I tried everything I could find/think of: auto margins, justify-content, align-items etc. No desired effect.
How to achieve this?
You need to add align-content: flex-start on flex-container or in your case #wrapper element.
#parent {
display: flex;
height: 350px;
background: yellow;
}
#wrapper {
flex: 1;
display: flex;
flex-flow: row wrap;
margin: 0 10% 50px 10%;
background: #999;
align-content: flex-start; /* Add this*/
}
#top {
flex: 1 100%;
height: 50px;
margin-top: 10px;
background: red;
}
#left {
width: 30%;
height: 150px;
margin: 10px 10px 0 0;
background: blue;
}
#right {
flex: 1;
margin: 10px 0 0 0;
background: green;
}
<div id="parent">
<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</div>
In a multi-line flex row layout, the align-content controls how the flex items aligns vertical when they wrap, and since its default is stretch, this is expected behavior.
Change it to align-content: center; and you'll see how their alignment change to vertical middle.
#parent {
display: flex;
height: 350px;
background: yellow;
}
#wrapper {
flex: 1;
display: flex;
flex-flow: row wrap;
margin: 0 10% 50px 10%;
background: #999;
align-content: center;
}
#top {
flex: 1 100%;
height: 50px;
background: red;
}
#left {
width: 30%;
height: 150px;
background: blue;
}
#right {
flex: 1;
background: green;
}
<div id="parent">
<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I'm trying to get one flex item to be centered vertically and horizontally.
I'd like for some text to be fixed to the bottom of the flex container.
margin-top:auto on the text just shoves the inner box to the top. Ideas?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Here's the codepen.
Try the below instead:
.box {
background:goldenrod;
height: 30px;
width: 30px;
margin: auto;
}
Here is one way of doing it.
Add position: relative to your .container CSS rule, and then use absolute positioning on .box to position the span to the bottom of the parent container.
You can center the text by allowing .box to have 100% width and then using text-align: center.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Since flexbox alignment involves the distribution of free space in the container, margin-top: auto won't work in this case because there's no counterweight on the other side.
Therefore, one method for centering the box and bottom-aligning the text involves creating a duplicate of the text element and placing it on the opposite side of the box. This will create a counterweight.
With equal balance on both ends, flex alignment properties (including auto margins) can work.
In this case, even justify-content: space-between would work.
Of course, you'll need to apply visibility: hidden to the duplicate element.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
margin: auto 0; /* or instead use justify-content: space-between on .container */
}
span:first-child {
visibility: hidden;
}
<div class="container">
<span>Text</span>
<div class="box"></div>
<span>Text</span>
</div>
OR, instead of a duplicate element, use a pseudo-element.
A less intrusive and more semantically proper method would use a pseudo-element as the duplicate. However, for this method to work, you would need to know the height of the actual element, because you would need to match it precisely.
Something like this will work to create equal balance:
.container::before {
content: "";
height: 15px; /* must match actual element's height */
}
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
height: 15px;
}
.container::before {
content: "";
height: 15px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>