This question already has answers here:
What are the differences between flex-basis and width?
(6 answers)
Closed 5 years ago.
Sample:
#wrap {
outline: 1px solid fuchsia;
display: flex;
}
#left {
background: tan;
width: 100%;
}
#right {
background: teal;
width: 50px;
height: 50px;
}
<div id="wrap">
<div id="left"></div>
<div id="right"></div>
</div>
Screenshot:
Questions:
When I use the browser element inspector, I see the right box is less than 50px wide although it has a fixed width in the CSS. Why does it basically happen?
How can it be prevented?
You can also use flex-shrink: 0; on the #right element to prevent it from shrinking.
This just defines that the #right element should not be allowed to shrink e.g. stays at 50px.
For more informations about flex there are many good articles e.g. on css-tricks
Use flex: 1 1; on #left instead of width:100%
#wrap {
outline: 1px solid fuchsia;
display: flex;
}
#left {
background: tan;
flex: 1 1;
}
#right {
background: teal;
width: 50px;
height: 50px;
}
<div id="wrap">
<div id="left"></div>
<div id="right"></div>
</div>
flex: <positive-number>
Equivalent to flex: 1 0.
Makes the flex item flexible and sets the flex basis to zero,
resulting in an item that receives the specified proportion of the
free space in the flex container. If all items in the flex container
use this pattern, their sizes will be proportional to the specified
flex factor.
Source
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 9 months ago.
I have a div of height 100%. Inside that div, there are two children: an <a> and another <div>. The child <div> also has a height of 100%. I expected setting the child div's height to 100% would make it fill up the remaining height, not copy the height of the parent element and disregard fellow children leading to unintended overflow.
Example: https://codepen.io/gamepro5/pen/Jjpaqva (why is the child class in this example overflowing it's parent with a height of 100%?)
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
height: 100%;
}
.child{
height: 100%;
width: 75%;
background-color: green;
/*would need to do a calc of 100% minus whatever the height of the <a> tag is, but that is annoying to do since the height of the other items can change. */
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
I simply want the child div to fill up the remaining available space with it's height without overflowing.
You can achieve this with flex: Set display: flex and flex-flow: column; on the parent element, and on the child set flex-grow: 1;
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
display: flex;
flex-flow: column;
height: 100%;
}
.child{
flex-grow: 1;
width: 75%;
background-color: green;
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
Why is the parent smaller than the children on narrow screens?
See snippet... then resize your browser (width-wise) to be smaller than the pink box. The scroll bars should appear. Scroll back to the right on the page and note the green background is smaller than the pink area and there is a white spot on the right.
So few questions:
Why does it happen?
How do I prevent the parent div's green background from getting smaller than the pink box/div when the browser is resized without setting an explicit width on the parent (or anywhere else) or using overflow:hidden?
Is there a flexbox solution to this problem?
Thanks,
Thomas
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
Flex items, by default, cannot be smaller than the size of their content. Therefore, while the parent can shrink, the flex items cannot shrink past the length of the text. This causes the overflow and, as a result, the column of white space below.
The initial setting on flex items is min-width: auto. In order for each item to stay within the container, switch to min-width: 0.
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
min-width: 0; /* NEW */
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
Now the pink boxes are not overflowing the container anymore.
However, the text is now overflowing the pink boxes.
The question doesn't specify behavior for the text, but here's one possible solution:
.parent {
height: 400px;
background-color: green;
display: flex;
}
.item {
height: 100px;
background-color: pink;
padding: 10px;
min-width: 0; /* NEW */
text-overflow: ellipsis; /* NEW */
white-space: nowrap; /* NEW */
overflow: hidden; /* NEW */
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
It happens, because your .parent is a normal block element (flex is also a block-level container) and that is initialized with width:auto;, which is in your case the width of the viewport. So scrolling to the right will show white space because your div's width is smaller than the whole scrollable area.
You do that with setting the .parent to an inline element, which will respond to its childrens width.
Yes, just use display: inline-flex; on the .parent.
.parent {
height: 400px;
width: 100%;
background-color: green;
display: inline-flex;
}
.item {
flex: 1;
height: 100px;
background-color: pink;
padding: 10px;
}
<div class="parent">
<div class="item">looooooooooooooooooooooooooooong</div>
<div class="item">looooooooooooooooooooooooooooong</div>
</div>
See display on MDN.
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'm trying to set up a flexbox layout with three columns where the left and right columns have a fixed width, and the center column flexes to fill the available space.
Despite setting up dimensions for the columns, they still seem to shrink as the window shrinks.
Anyone know how to accomplish this?
An additional thing I will need to do is hide the right column based on user interaction, in which case the left column would still keep its fixed width, but the center column would fill the rest of the space.
#container {
display: flex;
justify-content: space-around;
align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
}
.column.right {
width: 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}
<div id="container">
<div class="column left">
<p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
</div>
<div class="column center">
<img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
</div>
<div class="column right">
Balint Zsako
<br/> Someone’s Knocking at My Door
<br/> 01.12.13
</div>
</div>
Here's a JSFiddle: http://jsfiddle.net/zDd2g/185/
Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:
0 = don't grow (shorthand for flex-grow)
0 = don't shrink (shorthand for flex-shrink)
230px = start at 230px (shorthand for flex-basis)
which means: always be 230px.
See fiddle, thanks #TylerH
Oh, and you don't need the justify-content and align-items here.
img {
max-width: 100%;
}
#container {
display: flex;
x-justify-content: space-around;
x-align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
flex: 0 0 230px;
}
.column.right {
width: 230px;
flex: 0 0 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}
Despite setting up dimensions for the columns, they still seem to shrink as the window shrinks.
An initial setting of a flex container is flex-shrink: 1. That's why your columns are shrinking.
It doesn't matter what width you specify (it could be width: 10000px), with flex-shrink the specified width can be ignored and flex items are prevented from overflowing the container.
I'm trying to set up a flexbox with 3 columns where the left and right columns have a fixed width...
You will need to disable shrinking. Here are some options:
.left, .right {
width: 230px;
flex-shrink: 0;
}
OR
.left, .right {
flex-basis: 230px;
flex-shrink: 0;
}
OR, as recommended by the spec:
.left, .right {
flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */
}
7.2. 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.
More details here: What are the differences between flex-basis and width?
An additional thing I need to do is hide the right column based on user interaction, in which case the left column would still keep its fixed width, but the center column would fill the rest of the space.
Try this:
.center { flex: 1; }
This will allow the center column to consume available space, including the space of its siblings when they are removed.
Revised Fiddle
Compatibility with older browsers can be a drag, so be adviced.
If that is not a problem then go ahead.
Run the snippet. Go to full page view and resize. Center will resize itself with no changes to the left or right divs.
Change left and right values to meet your requirement.
Thank you.
Hope this helps.
#container {
display: flex;
}
.column.left {
width: 100px;
flex: 0 0 100px;
}
.column.right {
width: 100px;
flex: 0 0 100px;
}
.column.center {
flex: 1;
text-align: center;
}
.column.left,
.column.right {
background: orange;
text-align: center;
}
<div id="container">
<div class="column left">this is left</div>
<div class="column center">this is center</div>
<div class="column right">this is right</div>
</div>
.column.left {
width: 230px;
flex: 0 0 230px;
}
.column.right {
width: 230px;
flex: 0 0 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}
I want to have a child fill the exactly entire flex box of a flex layout.
If I use the following HTML:
<div class="parent">
<div class="child1">
should have 100px height
</div>
<div class="child2">
<div class="intermediatechild2">
<div class="subchild2">should have 200px height and padding</div>
</div>
</div>
</div>
and apply the following css:
.parent {
display: flex;
flex-direction : column;
height: 300px;
width: 200px;
}
.child1 {
height: 100px;
background: #008800;
flex: 0 0 auto;
}
.child2 {
height: 100%;
background: #003300;
flex: 0 0 auto;
}
.subchild2 {
height : 100%;
background: #ff0000;
}
.intermediatechild2 {
padding: 20px;
height : 100%;
width : 100%;
box-sizing: border-box;
border: 2px solid blue;
}
I get an overflowing intermediatechild. The height 100% seems to be relative to .parent
A fiddle can be found here:
http://jsfiddle.net/8znFV/4/
I did not understand exactly what you want, but if what you want is only leave. Subchild2 100% and follow the father's height (intermediatechild2), you'll have to add the father's height (intermediatechild2) with px and remove the height. child2.
Recalling that, you have to count the padding in father's height (intermediatechild2), so if you want. Subchild2 has 200px in height, will have to leave her father (intermediatechild2) with 240px, leaving 20 padding-top and 20 padding-bottom height of more than 200.
A note, only work in chrome as your css code is nonstandard, if you want I can breastfeed him at another time =)
Hope it helps
Here's an example: http://zip.net/bsmZgF
Just Remove height:100% from .child2and it will work. this will give 100% height to child2 element so it's going outside of parent.
It should be auto adjusted that's the purpose of flexbox and 100% height is giving more height(same as parent) to child2.
I fixed the problem. The solution lies in staying "display:flex". Once you started flex layout, you seem not to be able to step back to "display:block" with "height:100%".
<div class="parent">
<div class="child1">
should have 100px height
</div>
<div class="child2">
<div class="intermediatechild2">
<div class="subchild2">should have 200px height including padding</div>
</div>
</div>
</div>
css:
.parent {
display: flex;
flex-direction : column;
height: 300px;
width: 200px;
}
.child1 {
height: 100px;
background: #008800;
}
.child2 {
background: #003300;
flex: 1;
display: flex;
}
.subchild2 {
background: #ff0000;
flex: 1;
}
.intermediatechild2 {
padding: 20px;
display : flex;
box-sizing: border-box;
border: 2px solid blue;
}
working fiddle : http://jsfiddle.net/8znFV/6/