I have this part of CSS and I have problems on Chrome and Safari even though the whole CSS file has been prefixed with Autoprefixer (and double checked with Pleeeease). Any clue why ? It's supposed to be 2 boxes having a flex behaviour on row (.deuxcases), and each box has a flex behavior on column (2 x .case), but on Chrome and Safari it's all making a long messy line, works fine only on Firefox. I use Chrome 50 and Safari 8.0.2. Thank you
.deuxcases {
margin-top: 70px;
max-height: 60vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
-ms-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
.case {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
padding:auto;
margin:10%;
height: auto;
min-width: 25vw;
box-shadow: .5em .5em .5em .5em #aaa;
}
You should always try setting height and width to explicit values and not to auto. The latter works inconsistently across browsers, and that's why you are struggling with this layout.
Just set the height on the .case class to 100% instead of auto, and it'll work as expected.
Like this:
.case {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
padding:auto;
margin:10%;
height: 100%;
min-width: 25vw;
box-shadow: .5em .5em .5em .5em #aaa;
}
Related
i've been scratching my head all day, not knowing where to look.
The first image(left), Safari output is the result i'm expecting, but somehow in Chrome it works differently. My only conclusion is that flex works differently on chrome, but i'm not sure.
I know my css works, because i can get the expected output in safari.
I'm hoping someone can point me in the right direction. Any suggestions or links is very much appreciated. thanks.
fieldset.property{
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; flex-flow: row nowrap;
border-radius: 5px; border: 1px solid currentcolor;
margin: 10px 0;
}
fieldset.reference{
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: column wrap;
border-radius: 5px; border: 1px solid currentcolor;
margin: 10px 0;
}
.radio_wrap, .unit_wrap{border: 1px solid yellow;}
fieldset.property .radio_wrap{
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
flex: 0 0 30%;
display: flex; flex-flow: column nowrap;
align-items: flex-start;
padding: 15px 0;
}
fieldset.property .unit_wrap{
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
flex: auto;
display: flex; flex-flow: column nowrap;
}
Bro try this
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
Worked for me
Finally found out what was wrong with my code, long story short, one cannot set fieldset to display:flex.
Thanks to all who tried to help.
reference:
Why can't <fieldset> be flex containers?
I'm looking to display a sticky sidebar on my page, positioned relatively when the client is at the top of the document and fixed when the client scrolls.
My problem is with Safari (it seems to work fine with Chrome and Firefox).
I had it working with a set of floating divs (sidebar floats left) but when I changed to flexbox I found that fast scrolling was too fast for the sticky sidebar to keep up (whether detaching itself from its relative position or staying in a fixed position on the page.
Has anyone else encountered a similar issue and found a work around? I'll go back to floats if necessary but as I'm still learning this stuff it would be great to get to the bottom of why flexbox is causing problems.
Thanks! (Code/markup follows)
HTML:
<div class="order-form">
<div class="left-column" id="left-column">
<div class="sidebar" id="sidebar">
<ul id="courses"></ul>
</div>
</div>
<div class="menu" id="menu"><!-- content --></div>
<div class="right-column"> <!-- content --></div>
</div>
JQuery:
$(window).scroll(function() {
stickers();
});
function stickers() {
var sidebar = $(".sidebar");
if ($(window).scrollTop() > 300) {
sidebar.addClass("scrolling-sidebar");
} else {
sidebar.removeClass("scrolling-sidebar");
}
}
Old, unproblematic, CSS:
.order-form {
padding: 0 300px 0 120px;
}
.sidebar {
width: 150px;
font-weight: lighter;
text-transform: uppercase;
display: block;
}
.sidebar.scrolling-sidebar {
position: fixed;
top: 75px;
left: 5%
}
My current CSS file (compiled from Sass, with problems seemingly arising from my use of flexbox):
.order-form {
margin: 50px 0;
padding: 0 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
position: relative;
}
.order-form .left-column {
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 0;
-moz-flex-basis: 0;
flex-basis: 0;
-webkit-order: 1;
-moz-order: 1;
order: 1; }
#media (min-width: 992px) {
.order-form .left-column {
margin-right: 5%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-basis: 100px;
-moz-flex-basis: 100px;
flex-basis: 100px;
}
}
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 made a flexbox layout with some squared flexboxes nested in the main layout flexboxes. It works fine in Chrome and IE but Firefox v37.02 won't make them squared or doesn't show them at all.
I would like the containers themselves to be flexboxes of the main layout, so I can rearrange them with media-queries and have the content flexboxes wrap in the available space.
Here is a Fiddle example https://jsfiddle.net/SanMoll/jj591x8f/
<div class="main">
<div class="article">
<div class="itemXL"></div>
<div class="itemXL"></div>
</div>
<div class="aside">
<div class="itemL"></div>
<div class="itemL"></div>
<div class="itemL"></div>
<div class="itemL"></div>
</div>
</div>
<style>
.main {
display:flex;
width:100%;
height:100%;
background-color:#000;
}
.article {
/* display: flex;*/
flex-wrap: wrap;
flex-direction: column;
width: 50%;
flex: 1;
}
.itemXL {
background-color: #f4f4f4;
width: 97%;
height:0;
margin-right: 3%;
margin-bottom: 3%;
padding-bottom: 97%;
}
.aside {
/*display: flex;*/
flex-wrap: wrap;
flex-direction: row;
width: 50%;
}
.itemL {
background-color: #f4f4f4;
width: 47%;
height:0%;
margin-right: 3%;
margin-bottom: 3%;
padding-bottom:47%;
}
</style>
Any help is much appreciated.
Thank in advance!
You can use the flex-basis it is like the widht of the element but for flexboxes.
For example flex-basis: 50%;
and in the media query: flex-basis: 100%; (if flex-wrap is wrap the container will push the others down)
You should also start variable names not with numbers, you can put a '_'infront then it is fine
If you have problems with browser support just add this to be sure that it works in every browser
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
I have a variable set of images I'm displaying in a flexbox, and am trying to make sure the images vertically and horizontally align to their parent div. I've tried the usual vertical-align, text-align, max-width: 100%;, and margin: 0 auto;. Any good cross browser solutions to my dilemma that won't lead to warped/left-aligned images?
Here's the CSS (in it's current borky form, I've also tried the other aforementioned centering CSS):
.collage{
max-width: 100%;
max-height: 100%;
height: inherit;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
flex-direction: column;
}
.collage div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
overflow: hidden;
width: 100%;
}
.collage img{
max-height: 100%;
}
jsfiddle: http://jsfiddle.net/hSb93/3/
if you add margin: auto; to .collage img it solves it.
But flexbox is not supported by all browsers.
If you want it to be fully cross-browser you can put a span before the image and put this CSS in it:
CSS
.collage div{
text-align: center;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<div>
<span></span>
<img>
</div>