This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 6 years ago.
I want to contain a flex item within the parent so that it does not spill outside of the parent. Only the flex item should have a scrollbar (if necessary).
My styling works fine within Chrome and IE11, but not Firefox. I suspect there is a difference in interpretation of the flex-basis style set on #wrapper, but I cannot figure out why Firefox renders this differently.
Here's the desired rendering as seen in Chrome:
And here's what happens in Firefox:
I could apply a "duct tape" fix by adding #left { height: calc(100vh - 50px); }, but I'd prefer to identify the actual inconsistency if possible.
body, html, h1 {
padding: 0;
margin: 0;
}
header {
background-color: rgba(0, 255, 255, 0.2);
height: 50px;
}
#main {
height: 100vh;
background-color: rgba(0, 255, 255, 0.1);
display: flex;
flex-flow: column;
}
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
}
#left {
overflow-y: scroll;
background-color: rgba(0, 255, 255, 0.2);
width: 30%;
}
.box {
margin: 5px 0;
height: 50px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
<div id="main">
<header>
<h1>Header</h1>
</header>
<div id="wrapper">
<div id="left">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
This has to do with the flexbox specification's implied minimum sizing algorithm.
This is a Firefox bug.
Adding min-width: 0; min-height: 0 to #wrapper seems to do the trick:
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
DEMO
Original Answer Below
Currently you have overflow-y: scroll applied to #left.
If you also apply overflow-y: scroll to #wrapper, the vertical scroll launches in Firefox.
As to why Firefox interprets the code differently than Chrome I can't say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:
More information:
Bug 1043520 - (minsizeauto-fallout) Tracking bug for web content breaking due to new "min-width:auto" / "min-height:auto" behavior on flex items
Bug 570036 - Flexible box does not allow overflow scrolling of children elements without extra markup
DEMO: http://jsfiddle.net/seqgz8qv/ (scroll works in FF)
Scroll not working with CSS3 flex box in Firefox
Flexbox and vertical scroll in a full-height app using NEWER flexbox api
Scrolling a flexbox with overflowing content
Related
Is there a way to disable margin-collapsing altogether? The only solutions I've found (by the name of "uncollapsing") entail using a 1px border or 1px padding. I find this unacceptable: the extraneous pixel complicates calculations for no good reason. Is there a more reasonable way to disable this margin-collapsing?
There are two main types of margin collapse:
Collapsing margins between adjacent elements
Collapsing margins between parent and child elements
Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.
Other properties that, once applied to the parent, can help fix this behaviour are:
float: left / right
position: absolute
display: inline-block / flex / grid
You can test all of them here: http://jsfiddle.net/XB9wX/1/.
I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.
Sources: Sitepoint's article Collapsing Margins
One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:
.parentClass {
padding: 0.05px;
}
The padding is no longer 0 so collapsing won't occur anymore but at the same time the padding is small enough that visually it will round down to 0.
If some other padding is desired, then apply padding only to the "direction" in which margin collapsing is not desired, for example padding-top: 0.05px;.
Working example:
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
Edit: changed the value from 0.1 to 0.05. As Chris Morgan mentioned in a comment bellow, and from this small test, it seems that indeed Firefox takes the 0.1px padding into consideration. Though, 0.05px seemes to do the trick.
You can also use the good old micro clearfix for this.
#container::before, #container::after{
content: ' ';
display: table;
}
See updated fiddle: http://jsfiddle.net/XB9wX/97/
Actually, there is one that works flawlessly:
display: flex;
flex-direction: column;
as long as you can live with supporting only IE10 and up
.container {
display: flex;
flex-direction: column;
background: #ddd;
width: 15em;
}
.square {
margin: 15px;
height: 3em;
background: yellow;
}
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
overflow:hidden prevents collapsing margins but it's not free of side effects - namely it... hides overflow.
Apart form this and what you've mentioned you just have to learn live with it and learn for this day when they are actually useful (comes every 3 to 5 years).
I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements.
CSS*
Fixes
display: flow-root;
✅ Parent element collapse❌ Sibling element collapse
display: flex;flex-direction: column;
✅ Parent element collapse✅ Sibling element collapse
*Modern browsers (excluding IE11) support display: flow-root and display: flex.
Examples
section {
background: green;
outline: 2px solid purple;
}
p {
background: yellow;
margin: 1em 0;
}
section.flow-root {
display: flow-root;
}
section.flex {
display: flex;
flex-direction: column;
}
<h2>Default</h2>
<section>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
<h2><code>flow-root</code> (Fixes only container)</h2>
<section class="flow-root">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
<h2><code>flex</code> (Fixes both container & siblings)</h2>
<section class="flex">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
Every webkit based browser should support the properties -webkit-margin-collapse. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse (default), discard (sets margin to 0 if there is a neighboring margin), and separate (prevents margin collapse).
I've tested that this works on 2014 versions of Chrome and Safari. Unfortunately, I don't think this would be supported in IE because it's not based on webkit.
Read Apple's Safari CSS Reference for a full explanation.
If you check Mozilla's CSS webkit extensions page, they list these properties as proprietary and recommend not to use them. This is because they're likely not going to go into standard CSS anytime soon and only webkit based browsers will support them.
Try
{
display:flex;
flex-direction:column;
}
or
{
display:grid;
}
I had similar problem with margin collapse because of parent having position set to relative. Here are list of commands you can use to disable margin collapsing.
HERE IS PLAYGROUND TO TEST
Just try to assign any parent-fix* class to div.container element, or any class children-fix* to div.margin. Pick the one that fits your needs best.
When
margin collapsing is disabled, div.absolute with red background will be positioned at the very top of the page.
margin is collapsing div.absolute will be positioned at the same Y coordinate as div.margin
html, body { margin: 0; padding: 0; }
.container {
width: 100%;
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 50px;
right: 50px;
height: 100px;
border: 5px solid #F00;
background-color: rgba(255, 0, 0, 0.5);
}
.margin {
width: 100%;
height: 20px;
background-color: #444;
margin-top: 50px;
color: #FFF;
}
/* Here are some examples on how to disable margin
collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before { content: ' '; display: table; }
/* Here are some examples on how to disable margin
collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }
<div class="container parent-fix1">
<div class="margin children-fix">margin</div>
<div class="absolute"></div>
</div>
Here is jsFiddle with example you can edit
To prevent margin collapsing between siblings, add display: inline-block; to one of the siblings (one is enough though you can add it to both).
For your information you could use
grid but with side effects :)
.parent {
display: grid
}
Is there a way to disable margin-collapsing altogether? The only solutions I've found (by the name of "uncollapsing") entail using a 1px border or 1px padding. I find this unacceptable: the extraneous pixel complicates calculations for no good reason. Is there a more reasonable way to disable this margin-collapsing?
There are two main types of margin collapse:
Collapsing margins between adjacent elements
Collapsing margins between parent and child elements
Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.
Other properties that, once applied to the parent, can help fix this behaviour are:
float: left / right
position: absolute
display: inline-block / flex / grid
You can test all of them here: http://jsfiddle.net/XB9wX/1/.
I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.
Sources: Sitepoint's article Collapsing Margins
One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:
.parentClass {
padding: 0.05px;
}
The padding is no longer 0 so collapsing won't occur anymore but at the same time the padding is small enough that visually it will round down to 0.
If some other padding is desired, then apply padding only to the "direction" in which margin collapsing is not desired, for example padding-top: 0.05px;.
Working example:
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
Edit: changed the value from 0.1 to 0.05. As Chris Morgan mentioned in a comment bellow, and from this small test, it seems that indeed Firefox takes the 0.1px padding into consideration. Though, 0.05px seemes to do the trick.
You can also use the good old micro clearfix for this.
#container::before, #container::after{
content: ' ';
display: table;
}
See updated fiddle: http://jsfiddle.net/XB9wX/97/
Actually, there is one that works flawlessly:
display: flex;
flex-direction: column;
as long as you can live with supporting only IE10 and up
.container {
display: flex;
flex-direction: column;
background: #ddd;
width: 15em;
}
.square {
margin: 15px;
height: 3em;
background: yellow;
}
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
overflow:hidden prevents collapsing margins but it's not free of side effects - namely it... hides overflow.
Apart form this and what you've mentioned you just have to learn live with it and learn for this day when they are actually useful (comes every 3 to 5 years).
I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements.
CSS*
Fixes
display: flow-root;
✅ Parent element collapse❌ Sibling element collapse
display: flex;flex-direction: column;
✅ Parent element collapse✅ Sibling element collapse
*Modern browsers (excluding IE11) support display: flow-root and display: flex.
Examples
section {
background: green;
outline: 2px solid purple;
}
p {
background: yellow;
margin: 1em 0;
}
section.flow-root {
display: flow-root;
}
section.flex {
display: flex;
flex-direction: column;
}
<h2>Default</h2>
<section>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
<h2><code>flow-root</code> (Fixes only container)</h2>
<section class="flow-root">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
<h2><code>flex</code> (Fixes both container & siblings)</h2>
<section class="flex">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
Every webkit based browser should support the properties -webkit-margin-collapse. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse (default), discard (sets margin to 0 if there is a neighboring margin), and separate (prevents margin collapse).
I've tested that this works on 2014 versions of Chrome and Safari. Unfortunately, I don't think this would be supported in IE because it's not based on webkit.
Read Apple's Safari CSS Reference for a full explanation.
If you check Mozilla's CSS webkit extensions page, they list these properties as proprietary and recommend not to use them. This is because they're likely not going to go into standard CSS anytime soon and only webkit based browsers will support them.
Try
{
display:flex;
flex-direction:column;
}
or
{
display:grid;
}
I had similar problem with margin collapse because of parent having position set to relative. Here are list of commands you can use to disable margin collapsing.
HERE IS PLAYGROUND TO TEST
Just try to assign any parent-fix* class to div.container element, or any class children-fix* to div.margin. Pick the one that fits your needs best.
When
margin collapsing is disabled, div.absolute with red background will be positioned at the very top of the page.
margin is collapsing div.absolute will be positioned at the same Y coordinate as div.margin
html, body { margin: 0; padding: 0; }
.container {
width: 100%;
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 50px;
right: 50px;
height: 100px;
border: 5px solid #F00;
background-color: rgba(255, 0, 0, 0.5);
}
.margin {
width: 100%;
height: 20px;
background-color: #444;
margin-top: 50px;
color: #FFF;
}
/* Here are some examples on how to disable margin
collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before { content: ' '; display: table; }
/* Here are some examples on how to disable margin
collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }
<div class="container parent-fix1">
<div class="margin children-fix">margin</div>
<div class="absolute"></div>
</div>
Here is jsFiddle with example you can edit
To prevent margin collapsing between siblings, add display: inline-block; to one of the siblings (one is enough though you can add it to both).
For your information you could use
grid but with side effects :)
.parent {
display: grid
}
I have a section containing a picture tag. The picture tag is done with a srcSet of images for responsive design and using multiple pictures without downloading the pictures that are not being in use.
We need to center the text on said container, so I have a div with display: grid inside. This is absolute positioned and using height: 100% and width: 100%.
Using align-self: center on the child works perfectly on Chrome and Firefox, but to not my surprise, Safari decided to not cooperate. I discovered that if I set the section (or the grid) to a set height (ie: height: 5000px) it actually aligns itself to the center of the div, which makes me think Safari does not want to align-self: center and a unkown sized div.
There are multiple ways to solve this, but we a using our own library that is using grid, that's why I would like to solve it using align-self: center as we can just pass the prop to the React Component.
Do you guys know a workaround?
Here I left a fiddle. If you visit it on Chrome or Firefox, it works, but if you visit it on Safari, it does not. I also commented a line where I set a specific height to prove that it works with that on Safari.
Thanks!
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}
<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>
The problem is that Safari does not recognize a percentage height unless the parent has a defined height. That's old school CSS. Other browsers have evolved past that requirement, now accepting other references for percentage heights.
So, if you're going to use a percentage height on .grid, the parent needs a fixed height for it to work on Safari. Or, set percentage heights on the ancestors all the way up to the root element.
/* NEW */
html, body, .container, img {
height: 100%;
}
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}
<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>
More details:
Chrome / Safari not filling 100% height of flex parent
Working with the CSS height property and percentage values
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
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.