I have a requirement where I need to align content vertically within some divs. Flex-box would provide exactly what I need in an elegant way.
But I can't fully figure out whats the best way of setting the width of the flex-items is. If i use flex: 50%, the items grow with their content (which is not what I want). Also, I am not able to use overflow: hidden (because of the content within the divs).
Is it viable to set the width by using the good old width-property (this would work)? In other words: display: flex without flex: xx?
.wrapper {
display: flex;
width: 200px;
}
.left {
display: flex;
flex: 50%;
background-color: green;
/* overflow: hidden; *//* can't use that */
}
.right {
display: flex;
flex: 50%;
background-color: red;
/* overflow: hidden; *//* can't use that */
}
<div class="wrapper">
<div class="left">BigBigBigBigBig</div>
<div class="right">Small</div>
</div>
You can use flex: 0 0 50% so flex-grow will be set to 0 and it won't grow over 50%.
.wrapper {
display: flex;
width: 200px;
align-items: center;
}
.left {
flex: 0 0 50%;
background-color: green;
word-break: break-all;
}
.right {
flex: 0 0 50%;
background-color: red;
}
<div class="wrapper">
<div class="left">BigBigBsdfsdfigBigBigsdfsdf</div>
<div class="right">Small</div>
</div>
Does the fiddle supplied answer your question, just not too sure this is what you are after.
Related
In the following HTML, I want to set the height of left and right 100% of the parent element. In addition, the left div has fixed width. The right should use all of the remaining width.
I think because of using display: flex; in the parents div, the width of the left div doesn't stay constant. How can I set fixed width for it and allocate all of the remaining space to the right.
Edit: the calc(100-52px) is the height of the parent. The question is only about setting fixed width of 100px to the left so that it doesn't change on resizing the window.
Here's what I'm trying:
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
width: 100px;
background: yellow;
}
.right {
background: orange;
width: 100%;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
parent { display: -webkit-box;display:-webkit-flex;display: -ms-flexbox;display:flex;flex-wrap: wrap; }
.parent > [class*='col-'] { display: flex; flex-direction: column; }
You can use width: calc(100% - 100px) or flex: 1 for the right div.
Percentage values are calculated from the parent element, therefore you need to extract static values from 100% to get the remaining area.
But as you are already using a flex container here, you can just set flex: 1, which is the shorthand for flex-grow: 1, that will allow your container to take all the extra space in the parent container, since no other items are available.
Add a flex declaration to the .left selector:
flex: 0 0 100px;
flex syntax:
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
So this declaration is stating: "don't grow, don't shrink, define the initial size as 100px"
Read more: flex (MDN)
If right is to stand 52px away from the far right, then a margin will do . Please clarify your question.
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
width: 100px;
background: yellow;
}
.right {
flex-grow: 1;
background: orange;
margin-right: 52px;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
Set flex: 0 0 100px; on your .left div (you can remove width: 100px) if you want it to be a constant 100px - so no growing or shrinking.
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
flex: 0 0 100px;
background: yellow;
}
.right {
background: orange;
width: 100%;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
see if this helps you, comment if you need any changes
stackblits link for 1 fixed width, 1 relative column
I'd like to create a responsive page with a fixed html structure so I can just adjust the css. I would like to create rows with vertically and horizontally centered texts. The divs should fully stretch across the parent div.
My HTML...
<body>
<div class="parent">
<div class="d1">
one
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
</body>
My CSS...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
background-color: lightblue;
height: 100%;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
However here I am setting d1, d2 and d3 to the height of 100px and not 100% of the parent div. Example here: https://jsfiddle.net/bLf2sxq0/
My second idea was to use display: table for the parent which results in table-rows for the childs but then I end up with the same stretching issue plus the texts are not vertically centered. Here the css would be like this ...
body {
background-color: lightyellow;
height: 100%;
width: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
display: table;
background-color: lightblue;
}
.d1, .d2, .d3 {
text-align: center;
height: 100px;
}
.d2 {
background-color: lightgreen;
}
Example here: https://jsfiddle.net/qmbzkwr2/
Is there a way to stretch the divs vertically along the parent and keep the texts centered vertically and horizontally within the divs? So I would not have width 100px but something like calc(100%/3) or any other solution to do this? Or maybe by using the flex grow option? Easiest way would do it :)
Thanks for any help!
You're on the right track. Use flexbox to stretch and fill items vertically and evenly. Remember to set parent containers (e.g. body, html) to height: 100%.
From here, if you want control over some items, use flex on any individual item, like flex: 1 1 300px on class .d2 for example.
Codepen
body, html {
height: 100%;
}
.parent {
background-color: lightblue;
height: 100%;
display: flex;
flex-direction: column;
}
.d1, .d2, .d3 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.d2 {
background-color: lightgreen;
}
<div class="parent">
<div class="d1">
<div class="d11">
one
</div>
</div>
<div class="d2">
two
</div>
<div class="d3">
three
</div>
</div>
I've read through all existing solutions in which images could fill the containing divs but I haven't found a solution for filling a div without a static dimension, such as divs that only have been laid out by flex-grow.
Currently the image will destroy the flex-grow proportions I have set on the container. I want the img to just fill the div and not stretch the div out.
As much as possible I don't want to inline style.
Is there an existing polyfill or solution to this?
.container {
display: flex;
min-height: 300px;
width: 500px;
flex: 1;
}
.sub-container {
flex: 1;
display: flex;
flex-direction: row;
}
.sub-container > div {
flex-grow: 1;
}
.first-container {
background-color: blue;
}
.second-container {
background-color: yellow;
}
.second-container>img {
max-height: 100%;
max-width: 100%;
object-fit: scale-down;
}
<div class="container">
<div class="sub-container">
<div class="first-container">
A
</div>
<div class="second-container">
<img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
</div>
</div>
</div>
http://jsfiddle.net/jojonarte/tu3nbw4q/
You have this in your code:
.sub-container > div {
flex-grow: 1;
}
Okay, that defines flex-grow.
But you haven't defined flex-basis. As a result, flex-basis keeps its default value, which is: auto (i.e., content-defined).
That's what you're seeing your layout: A flex item that is being sized by the content.
In other words, because the natural dimensions of the image are so large (in comparison to the size of the container), the image is taking up all free space and flex-grow is having no effect (it has no free space to distribute).
As a solution, add this to the rule:
.sub-container > div {
flex-grow: 1;
flex-basis: 0; /* new */
}
or, more efficiently:
.sub-container > div {
flex: 1; /* fg:1, fs:1, fb:0 */
}
revised fiddle
.container {
display: flex;
min-height: 300px;
width: 500px;
}
.sub-container {
flex: 1;
display: flex;
flex-direction: row;
}
/* ADJUSTMENT HERE */
.sub-container > div {
flex: 1;
}
.first-container {
background-color: blue;
}
.second-container {
background-color: yellow;
}
.second-container>img {
max-height: 100%;
max-width: 100%;
object-fit: scale-down;
}
<div class="container">
<div class="sub-container">
<div class="first-container">A</div>
<div class="second-container">
<img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
</div>
</div>
</div>
More information:
To avoid the problem described in the question, as a general rule, use the flex property instead of flex-grow, flex-shrink and flex-basis individually.
From the flexbox specification:
§ 7.2.1. Components of
Flexibility
Authors are encouraged to control flexibility using the flex
shorthand rather than with its longhand properties directly, as the
shorthand correctly resets any unspecified components to accommodate
common uses.
Learn more about the difference between flex-basis: auto and flex-basis: 0
Use background-image instead use img tag and use background-size: 100% 100%;:
See fiddle
.container {
display: flex;
min-height: 300px;
width: 500px;
flex: 1;
}
.sub-container {
flex: 1;
display: flex;
flex-direction: row;
}
.sub-container>div {
flex-grow: 1;
}
.first-container {
background-color: blue;
}
.second-container {
background: url(https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div class="container">
<div class="sub-container">
<div class="first-container">
A
</div>
<div class="second-container">
</div>
</div>
</div>
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I've got a delicate problem for any CSS guru out there.
My green div has a flexible height, taking up the remaining.
And now I want to put a div inside that div which should be the half of the green div. But it seems like if Chrome treats it like half of the whole page rather than the flex item.
http://jsfiddle.net/unh5rw9t/1/
HTML
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>
CSS
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
}
#half_of_content {
height: 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
#Michael_B explained why Chrome behaves like this:
You gave the body a height: 100%. Then gave its child (.wrapper)
a height: 100%. Then gave its child (.content) a height: 100%.
So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be a 50% height
of body.
However, Firefox disagrees because, in fact, that height: 100% of .content is ignored and its height is calculated according to flex: 1.
That is, Chrome resolves the percentage with respect to the value of parent's height property. Firefox does it with respect to the resolved flexible height of the parent.
The right behavior is the Firefox's one. According to Definite and Indefinite Sizes,
If a percentage is going to be resolved against a flex item’s
main size, and the flex item has a definite flex
basis, and the flex container has a definite main
size, the flex item’s main size must be treated as
definite for the purpose of resolving the percentage, and the
percentage must resolve against the flexed main size of the
flex item (that is, after the layout algorithm below has been
completed for the flex item’s flex container, and the flex
item has acquired its final size).
Here is a workaround for Chrome:
#content {
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
height: auto;
}
This way the available space in #content will be distributed equally among #half_of_content and the ::after pseudo-element.
Assuming #content doesn't have other content, #half_of_content will be 50%. In your example you have a 2 in there, so it will be a bit less that 50%.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
You could absolutely position div id="half_of_content".
#content {
flex: 1;
height: 100%;
background-color: green;
position: relative; /* new */
}
#half_of_content {
height: 50%;
background-color: yellow;
position: absolute; /* new */
width: 100%; /* new */
}
DEMO
With regard to your statement:
But it seems like if Chrome treats it like half of the whole page
rather than the flex item.
You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.
With absolute positioning, however, you don't need to specify parent heights.
Nesting flexboxes is a little buggy. I reworked your markup a little by adding an inner wrapper with display: flex; which seems to do the job. Here is the fiddle (also using class names instead of ids).
<div class="content">
<div class="wrapper-inner">
2
<div class="half">
2.1
</div>
</div>
</div>
.wrapper-inner {
position: absolute;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
Fix:
on #content set
display: flex;
flex-flow: column nowrap;
justify-content: flex-end
on #half_of_content set flex: 0 0 50%;
Caveat: you need to add an extra div as a child of #content.
Here's the full example:
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
display:flex;
flex-flow: column nowrap;
justify-content: flex-end;
background-color: green;
}
#half_of_content {
flex: 0 0 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>
I have a menu div that fills 100% of its container height, and beside it, to the right, are the header, body and footer sections.
I managed to do this with the CSS flex property. However, I want to change the amount of width the "menu" div takes out of the container, as in, making it 10% width of container's width, and make the rest divs fill what's left (even if the "menu" div is hidden at a later time).
JS Fiddle of what I have right now: https://jsfiddle.net/jf29vr0x/3/
.container {
display: flex;
flex-flow: column wrap;
width: 75%;
height: 500px;
position: relative;
margin: 0 auto;
}
.menu {
flex: 0 0 100%;
background: lightblue;
}
.header {
flex: 0 0 10%;
background: lightgray;
}
.body {
flex: 0 0 80%;
background: purple;
}
.footer {
flex: 0 0 10%;
background: lightgreen;
}
<div class="container">
<div class="menu">
Menu
</div>
<div class="header">
Header
</div>
<div class="body">
Body
</div>
<div class="footer">
Footer
</div>
</div>
I found that if I set the width explicitly on the "menu" class, it resizes it, but the rest of the boxes don't fill the space left, unless I also explicitly state their width to 100%. However, doing this, makes the container overflow, and because the container is aligned to the center, it looks off.
I could also set the width to 90% (on header, footer body) and 10% on the menu, but the menu is sometimes set to display: none;, so when it disappears, the other layout parts are only going to be 90% of container's width.
Is there any way of doing this with only flex-box properties? I don't understand very well what flex-shrink and flex-grow are about, but I think they only affect (in this case) the height?
Thank you.
You have to add a wrapper around the right column, and then only specify flex-basis on the .menu element.
.container {
display: flex;
width: 75%;
height: 500px;
position: relative;
margin: 0 auto;
height: 500px;
overflow: hidden;
}
.right-col {
flex-flow: column wrap;
flex-grow: 1;
height: 100%;
display: flex;
}
.menu {
flex-basis: 10%;
background: lightblue;
}
.header {
flex: 0 0 10%;
background: lightgray;
}
.body {
flex: 0 0 80%;
background: purple;
}
.footer {
flex: 0 0 10%;
background: lightgreen;
}
<div class="container">
<div class="menu">Menu</div>
<div class="right-col">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
</div>
</div>
Fiddle: https://jsfiddle.net/jf29vr0x/11/
Now when the menu is hidden, the right column expands the full amount.