Consider this:
<div class="parent">
<div class="child"></div>
</div>
.parent {
display: flex;
flex-direction: column;
background: teal;
width: 100%;
justify-content: center;
}
.child {
display: flex;
background: red;
width: 50%;
height: 20vh;
max-height: 20px;
}
Chrome (57), Firefox (52), IE (Edge) render is like so:
But Safari (Version 9 on a Mac with OS X) renders it like so:
I consider Safari's rendering wrong, tell me if you disagree.
If you remove either justify-content: center or max-height: 20px or change height: 20vh to height: 20px Safari renders like the other browsers (what I would consider correct).
Codepen: https://codepen.io/anon/pen/jmrOjq
Is this a known Safari bug? Am I miss using flex-box here?
Related
I'm trying to create a rotated header for a compact table, and it works fine in Chrome but not Firefox.
Code:
div {
display: flex;
align-items: stretch;
}
span {
border-left: 1px solid black;
writing-mode: vertical-lr;
transform: rotate(200deg);
display: inline-flex;
align-items: center;
padding: 0;
white-space: nowrap;
width: 35px !important;
}
<div>
<span><b>Hello</b> world</span>
<span><b>Foo</b> bar</span>
</div>
In Chrome (and Edge) I get:
In Firefox I get:
If I take the align-items: center out I get the same behaviour in all browsers, but I obviously lose my alignment:
I guess I can hack this with padding, but I'd rather know what it's doing for future reference.
I have an interesting issue where the background image of an element is not showing up the same between the two browsers. Chrome 65, FF 59.
I'm using the technique to show a ratio of the background image using padding-top percentage, where height is zero.
A codepen is also included.
https://codepen.io/anon/pen/OvGeeJ
A quick thing to note. The content div was only for visually knowing when the flex container ended.
It seems like the way % is calculated is different.
body{
border: 0;
padding: 0;
margin: 0;
}
.flex{
display: flex;
position: relative;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
height: 300vh;
background: black;
align-items: flex-start;
}
.stickybg{
height:0;
width: 100%;
background-image: url(https://i.imgur.com/8bKkEfR.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 19%;
}
.content{
height: 100vh;
background: #111;
}
<div class="flex">
<div class="stickybg"></div>
</div>
<div class="content"></div>
As dholbert said in a comment, it appears FF beta 60 has the issue fixed.
A workaround is to use VH or VW units which in my case would simulate the same thing.
Replacing
padding-top: 19%;
for
padding-top: 19vw;
I was trying to use flex-direction column along with margin: auto for a child element in Safari 10, but the horizontal margins don't seem to apply while they do in literally every other browser (Edge, Firefox, Chrome). Here's a quick repro:
http://jsfiddle.net/paostj73/
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
}
It looks like this in Safari:
And like this in Chrome:
I know that setting align-items is a workaround, but unfortunately, it also happens to break other parts of my layout. Is there another way to fix this, and is this already a known issue?
This is an issue IE has, and if I'm not mistaken Safari too, caused by the align-items default value stretch, which stretch the element to full width and fail to apply the auto margin.
To keep the default, align-items: stretch for all items but the to-center element, add align-self: center to its rule
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
align-self: center; /* added, fix for IE and Safari */
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>
Based on how the other elements are suppose to render, setting align-items: flex-start to the center-pls, will also work, though then the other elements might need width: 100% set, so they stretch and fill their parent's width.
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
align-items: flex-start; /* added, fix for IE and Safari */
}
.to-center {
margin: auto;
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>
I have an issue with displaying iframe with display: flex in Chrome and Opera, it works as intended in Firefox and IE11.
The issue is iframe inside div with display: flex is not taking all height in browsers like chrome and opera. However Firefox and IE11 display it correctly.
Could you help me fix it, such that it displays correctly also in Chrome and Opera.
Thanks.
This is the output in Firefox(correct output).
This is the output in Chrome and Opera.
html,
body {
width: 99%;
height: 98%;
}
.flex {
/* basic styling */
width: 100%;
height: 100%;
border: 1px solid #555;
font: 14px Arial;
overflow: auto;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.flex > div:nth-child(1) {
background: #009246;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.flex > div:nth-child(2) {
background: #CE2B37;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 300px;
}
.flex > div:nth-child(2) iframe {
width: 99.5%;
height: 99%;
}
<body>
<div class="flex">
<div>test</div>
<div>
<iframe src="#"></iframe>
</div>
</div>
</body>
I've just come along a strange bug in Firefox. I have an image displayed as a flex-item and want it to shrink down to a maximum size using max-width and height: auto. It works perfectly in all browsers I tested, except Firefox. I guess it has something to do with the default alignment of flex-items which is stretch. I overwrote it to flex-start, which worked fine, but not in Firefox.
Has anybody else experienced this?
img {
max-width: 50px;
height: auto;
}
.container {
display: flex;
align-items: flex-start;
}
See this Codepen for an example: http://codepen.io/kaesetoast/pen/PPevbv
Use flex-basis insread of max-width
img {
flex-basis: 50px;
height: auto;
}
img {
flex-basis: 50px;
height: auto;
}
.container {
display: flex;
align-items: flex-start;
}
<div class="container">
<img src="http://lorempixel.com/1440/1500/" width="1440" height="1500" alt="">
</div>
Tested in FF 41.0.2