I have this case:
http://codepen.io/anon/pen/radoPd?editors=110
This is the CSS Code:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
overflow-y: scroll;
}
For some reason, on IE11, neither the .sidebar nor the .main area will fill the whole height of the wrapper.
This is inconsistency between browsers. Is this a bug? Am I missing something?
This a known IE bug that unfortunately has been closed as Won't Fix by IE Team and described as follows:
In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.
AFAIK and despite this description, the bug also applies when flex-direction is row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.
As a workaround I propose to set a min-height: 100vh to the main element too:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
min-height: 100vh;
}
Pen here.
Related
I have a block in a mat-table in Angular that makes a colored square.
When adjusting its height, e.g.
display: inline-block;
width: 10px;
height: 97%;
it works well in Chrome and Edge. However, it disappears in Firefox.
Setting the height to px makes it appear, i.e.
height: 65px;
Setting:
-moz-height:100%;
for the column class also makes it disappear in Firefox.
It seems that height must be set in Pixels for Firefox using 'height' or it disappears.
Even using:
-moz-height: 50px
doesn't keep it from disappearing from Firefox if height isn't present.
A useful alternative was em - it seems that whereas % doesn't work with Firefox - em works a bit like % across all browsers.
e.g. height:4em
However, the block does not extend vertically as much as it should - and it adds additional size to the row.
There are many instances of Chrome and Firefox rendering height differently, e.g. here, here, here, here, and here.
Perhaps, the most useful answer is here which explains why implementation varies across browsers.
The recommended solutions there are to ensure that parent element height has been set - as I did here:
//for the table
.example-table {
flex: 1 1 auto;
overflow-y: auto;
min-width: 100%;
height: 100%;
}
// for the mat-table in the table
.mat-table {
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
min-width: 100%;
height: 100%;
}
And setting the box-sizing, e.g.:
-moz-box-sizing:content-box; or -moz-box-sizing:border-box;
The problem was with Firefox. One issue was that nested divs in any of the columns / cells affected Firefox rendering differently than Chrome and Edge (which worked as predicted).
Removing all nesting where possible helped somewhat. Using the -[moz-transform][1] methods helped make things more similar across browsers (though not emulating the same behavior).
This helped:
.block {
display: inline-block;
width: 30px;
vertical-align: middle;
-moz-transform: scaleY(1.2);
-moz-transform: translateY(5px);
height: 95%;
margin-top: 5px;
margin-bottom: 1px;
}
where the column is defined as:
td.mat-column-block {
flex-shrink: 1;
align-self: stretch;
vertical-align: center;
max-width: 50px;
min-width: 50px;
border-top: none;
height: 50px;
max-height: 50px;
min-height: 100%;
justify-self: stretch;
}
I tried this:
<div id="fixed-navigation">...<div>
<div id="content">...<div>
and the CSS:
#fixed-navigation {
position: fixed;
width: auto;
height: 100%;
background: red;
overflow-y: scroll;
}
#content {
background: yellow;
}
See: http://codepen.io/zssz/pen/LGEJOJ
But this hides part of the content div below the fixed div, and setting an arbitrary margin-left or something on #content would just ignore the variable auto width on #fixed-navigation.
So what's the right CSS way to accomplish this seemingly simple use case? (I do want the fixed navigation to be fixed, that is it must always stay on the left side while scrolling through the content)
EDIT: Oh sorry, and I forgot to mention it should work in the majority of actual browsers out there including IE9, so alas not flexbox to the rescue.
Here's a flex box implementation:
http://codepen.io/achisholm/pen/OMPBmp
The essential stuff is...
html, body {
height: 100%;
}
display: flex on the container, in this case body, then...
#fixed-navigation {
flex: 0 0 150px;
height: 100%;
overflow-y: scroll;
}
#content {
flex: 1 0 auto;
height: 100%;
overflow-y: scroll;
}
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?
I have a problem combining div boxes and the overflow: auto property for adding scrollbars if needed.
The problem is that I don't want the whole page to be scrollable, but just the content div, thus I added overflow: hidden to the body and overflow: auto to the content.
body
{
padding: 0;
margin: 0;
background-color: navy;
overflow: hidden; /** no scrollbar on whole page **/
height: 100%;
}
#content
{
background-color: green;
overflow: auto;
height: 100%;
}
Nevertheless, I'm not able to see the end of the page, as the div increases its size beyond the viewable part of the website.
Please suggest how to solve this problem and only keep the content div scrollable.
I uploaded an example of my problem here: jsfiddle.net/3n7ay/
I can only get this to work with a fixed header height, is there no solution for dynamic header size? It's hard for me to believe...
Thanks & Regards
I think you looking for overflow-y: scroll; instead?
See fiddle: http://jsfiddle.net/3n7ay/5/
If you set height: 100% to the content element and you have also an header in your viewport this will make the former not entirely visible inside the viewport itself.
So the height must be defined as 100% - <header height>, either via javascript (if you need to support older browser) or via CSS3 calc() function, e.g.
#content {
height: -webkit-calc(100% - <height of header>px);
height: -moz-calc(100% - <height of header>px);
height: calc(100% - <height of header>px);
}
Try flex box, if you don't concern about Ie8 and Ie9. You can see the compatibility situation in caniuse.com: flexbox
Make container a flex box:
#container {
background-color: yellow;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
Flex the content:
#content {
background-color: green;
overflow: auto;
height: 100%;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
See fiddle: http://jsfiddle.net/r4JUk/4/