I am using Flexbox for a series of content blocks. The idea is to have blocks in a flex container whose height will be determined by the total of the flex items within it. This is working well on Chrome and Safari as it calculates the container height automatically and correctly, but the same does not happen on Firefox + IE. My CSS looks like this:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.primary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.secondary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 28.10026385%;
flex: 2 1 40%;
margin-left: 10px;
}
}
Essentially, the padding-top: 28.1% decoration is for a background image set as an inline style. On chrome + safari, this calculates the height just fine. However, the container's height is not set up on IE + FF. I have tested all my browser prefixes and checked a lot of questions, but I'm a bit lost on why the height is calculated differently. If anyone has any suggestions that would be excellent. Setting a min-height on the blocks is not an option, as we will have varying sizes of blocks, so we don't want to constrain ourselves to a fixed or min height.
Short version: is there a difference in how Firefox + IE calculate height of flex containers and items? If so, what is the best way to get it to behave like Safari + chrome?
Here is a contrived example: http://codepen.io/anon/pen/NGjYGR
I'm noticing a few potential issues with the code you're referencing. Also, without full context of the referenced code—missing HTML—recommendations are based on the assumption that your HTML is structured in the following manner:
.container
.primary
.secondary
No height set on .container
If dimensions aren't set on this element how are the dimensions calculated for the children elements (i.e.: "28.1%" of ?) ?
There are many known issues with certain browser implementations of the flex specification
There are known issues with implementations flex-basis, and height calculations. Here is a comprehensive article on browser nuances on flex: here.
References:
Normalizing Cross-browser Flexbox Bugs:
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
Related
https://exchagerates.herokuapp.com/
If you look at the Guam flag in Chrome it is cut off from the top. It gets distributed between the first column and the second. Which is what I don't want. How do I get the tops of all columns to align? I have tried using page-break-inside: avoid but that doesn't seem to help.
Can someone help?
You were close, just add a webkit prefix:
-webkit-column-break-inside: avoid;
Required for my Chrome at least, Windows, version 77.0.3865.120 (Official Build) (64-bit).
Use align-items: center; or align-items: flex-end; on all flex items
OR
Change the structure Flexbox
For the container you've decided to create a CSS columns layout. This doesn't have much effect in generating height for the children. Quite the opposite.
Referrring to a Bootstrap card-deck layout, you'll need the following CSS on the container:
/*columns: 300px 4;*/
/* margin: 20vh 5% 5%; */
margin-top: calc(50px + 4%); // 50px height of the input + 2% top margin + 2% bottom margin
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-flow: row wrap;
In this case the children will be aligned as flex items. For a column layout you'll need the flex-basis property.
display: flex;
flex: 1 0 30%; // flex-basis 30% for 3 colums per row (33.33% - 15px - 15px)
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float
file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.
I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}
The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.
I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.
Thank god we have Flexbox for that!
Now this demo works in Chrome, Safari, FF and IE Edge:
http://codepen.io/IbeVanmeenen/pen/PqgOJM
.el {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 4rem 0;
}
.el__wrp {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
justify-content: space-around;
min-width: 0px;
}
But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...
Anyone have a clue how to fix this..?
Thanks in advance
Ok, fixed this!
I updated the pen.
I tested the original code, but replaced the images with text, and it worked! So the problem was the images.
Original code for the images was:
.el__wrp img {
display: block;
margin: 0;
max-width: 100%;
min-width: auto;
}
And I changed it to:
.el__wrp img {
display: block;
margin: 0;
width: 100%;
}
It all works now!
The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex
I am trying to use Flexbox with the latest browsers (FF 36, Chrome 41, Opera 28, Safari 8) to achieve full-page holy grail layout. I've gotten it working in everything but Firefox.
The page is split vertically into header, main, footer. main is then split horizontally into three panels. Each panel should scroll independently if their content overflows their bounds. Firefox is the only one that will not do this.
Here is my example: http://jsfiddle.net/bpnjx3v9/1/
html, body {
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
background-color: blue;
}
#header, #footer {
flex: 0 0 100px;
background-color: blue;
}
#main {
background-color: yellow;
flex: 1 0 0px; /** Don't set parent of component to auto */
display: flex;
flex-direction: row;
}
.panel {
display: flex;
flex-direction: column;
flex: 1 0 auto;
overflow: auto;
}
What I don't understand even after reading the spec is how to make #main only use the height allocated to them by the parent. Instead FF seems to make their "intrinsic height" the height of all the child elements. What makes this work in all other browsers but not FF? Bonus points for pointing out the correct section of the spec that explains this.
Ok, so setting min-height: 0px on #main fixes Firefox and keeps everyone else happy.
http://jsfiddle.net/hughes_matt/bpnjx3v9/7/
#main {
background-color: yellow;
flex: 1 0 0px; /** Don't set parent of component to auto */
display: flex;
flex-direction: row;
}
Couldn't quite explain it but then found this in the spec:
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See Implied Minimum Size of Flex Items.)
main's minimum content height is the height of all its children, the panels. By giving that container explicit permission to be smaller than that, it maxes out at the height of its parent. Chrome/Safari/Opera were happy with a flex-basis: 0px, but Firefox needed min-height in addition to that.
Can anyone tell if this is a violation of the spec? Is FF being too strict or the other browsers being too lenient?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What are the differences between display:box and display:flexbox
I have read a css3 flex-box demo here,the parent element's style is :
.flexbox {
display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
width: 50%;
height: 100px;
background: orange;
}
Once I change the display: -webkit-flexbox; to display: -webkit-box;, the page layout have changed.
Buy I read some tutorial about the -webkit-flexbox and -webkit-box just is the same syntax.Is that true? Are there some differences between them?
According to this source the specs have changed:
The Working Draft has undergone changes to much of the syntax used in the flexbox model. For example:
display: box;
This will become:
display: flexbox;
Both versions of the syntax work (at least in chrome). The reason why the layout looks different if you change the display style is because you have to change -webkit-flex-pack: center; to -webkit-box-pack: center; when you use display: -webkit-box;
So this is equivalent to your css style from above and should produce the same layout:
.flexbox {
display: -webkit-box;
-webkit-flex-box: center;
-webkit-flex-box: center;
width: 50%;
height: 100px;
background: orange;
}