I'm trying to have two elements fill their container and wrap when they reach a certain minimum size. The code I have works perfectly on all browsers other than safari & I can't figure out an alternative. It appears to be an issue with flex-basis: 0
Here's the issue:
http://www.cssdesk.com/RKeNY
Both display differently in safari and chrome. When the container width is changed on safari the flex-wrap has no effect.
Try setting
-webkit-flex:1 1 auto;
instead of
-webkit-flex:1;
on the flex elements.
This is discussed here: https://github.com/Modernizr/Modernizr/issues/1414
Specifically:
hexalys commented 28 days ago
To enable wrapping you'll need to need to specifically set flex: auto
(equivalent to flex: 1 1 auto;) or set both property flex-shrink:
1;and flex-basis: auto. The flex: 1; you have in your code does flex:
1 1 0px; technically allowing shrink, but apparently there is a bug
with the webkit prefixed version in Safari which does not allow a flex
wrap in that condition, while it correctly does on the unprefixed
version of Chrome and Firefox.
Related
I'm using css flexbox to do a header/body/footer layout. However if spicing up the outer-div with overflow-x:hidden, Chrome begins to crop the bottom (the status element) when reducing height of the viewport, and introduces a vertical scrollbar.
Firefox works as expected by shrinking the body-element height, and continue to show the statusbar when reducing the browser height.
Chrome restores the correct layout if reloading page, or changing the viewport width.
Stackblitz sample:
https://stackblitz.com/edit/angular-xtapbp
The difference between Chrome and Firefox can be seen by showing the above stackblitz in the two browsers.
The implied value of min-height (or min-width for default flex-direction: row orientation) is auto for flex layouts. For some reason, Chrome decides, that the size of the content that you have during initial page render should be treated as current auto value, and during window shrinking it does not recalculate the whole layout. Probably it is a bug in Chrome css layout engine. A solution for this is to add min-height: 0 to the content+status div, as shown in this link.
I have some table that set width for elements so some columns will have at least some percent of a width of the container.
I want to use flexbox to center this table and set the minimum-width for it.
The goal is to have centered table with some minimum width for which some columns will have the same width (same ratio).
If some cells have longer texts then I don't care if ratio will broke (width of this column will be bigger then other). I just care that it has nice and same width of columns for common case (small amount of text data in cells)
I was able to came up with solution that works on Firefox and Chrome (link).
But for Edge and IE11 the table stretch as if it was not in flex container (try to comment display: flex; on Firefox or Chrome and the result is stretched table like on Edge.
Also it looks that sometime setting columns work (link2). But I don't see the pattern of when it break in Edge/IE11.
Here is more production example that I want to achieve (works in Chrome/Firefox, stretch in Edge/IE11): "production" table example.
Any ideas how to achieve what I want on Edge/IE11? (I put in bold what I want to achieve).
It would be good if I could keep using flexbox container (it might require more changes in my codebase) but I think I will be fine with deleting style=width:p% from <col> if that's necessary.
The min-width rule is apparently being ignored in Edge / IE11.
There's an equivalent command that seems to work.
Instead of:
.inner {
min-width: 800px
}
Use:
.inner {
flex-basis: 800px; /* 1 */
flex-shrink: 0; /* 2 */
}
revised codepen
notes:
flex-basis is a substitute for width, in this case (see: flex-basis vs width)
flex-shrink: 0 ensures flex-basis / width cannot decrease below 800px (hence, both rules together emulate min-width)
I just got into the flex world and am struggling a little with a setup like this one:
https://jsfiddle.net/5b0pLgkj/
In Chrome and Safari it works perfectly, children elements can be re-sized and they take the full empty space of the container. In Firefox, however, flex:1 does not seem to do anything and children can't be resized (although the height seems to be changing in the DOM).
Is it really necessary to use flex:auto?. When I do that it seems to work but children no longer take all the empty space. Any thoughts?
Thank you!
flex:1; it is equivalent to flex: 1 1 0n;
In Chrome for example flex:1 and flex:1 1 0; produce different results because flex-basis is ignored and only flex-grow and flex-shrink are applied.
So, your flex-basis is set to zero and FF read it as 0, which do not work for your the desired effect.
Set it to flex: 1 1 auto; or simply flex: auto;
Flex is the shorthand for flex-grow, flex-shrink and flex-basis.
See: https://css-tricks.com/almanac/properties/f/flex/
I am working on my project now, so I decided to use flexbox instead of float. It works fine for me, but I've found that display:flex doesn't work on the old iphone (ios 6.1). So I've added
display: -webkit-box;
Flex property works now, but all items are arranged in a row. I've created a simple fiddle, to show the problem.
Also I've made two screenshots, to show how it works on PC and on iPhone.
PC:
iPhone:
As you see -webkit-flex-wrap: wrap doesn't work.
Does anybody know how to solve this problem??
I hope for your help.
Support for the current flexbox specification in iOS doesn't begin until iOS 7.0.
iOS 3.2 - 6.1 support the old flexbox specification and do not support wrapping.
See browser support data here: http://caniuse.com/#search=flexbox
See the flex-direction property for info on how to align the flex items (row or column).
.wrapper {
flex-direction: column;
...
}
Also, on your flex items, you have (width: 500px;) try the flex property:
.wrapper > div {
flex: 0 0 500px;
...
}
When height: 100vh is provided to iOS Safari, it uses the full iPhone screen size instead of the visible part (excluding the toolbar, if currently visible).
I search a lot but didn't find any proper workaround for it.
Is there a (preferably CSS-only) way to set the height of an element to the size of the visible screen - no matter if a toolbar is displayed or not?
I want to center an HTML element both, vertically and horizontally, while its width adapts to the screen width as well.
I am currently using the following piece of CSS, which works great - except for mobile iOS Safari (I left out the vendor prefixes for the sake of simplicity):
.vertical-center{
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
Someone shared a possible solution in a comment on my blog post.
He recommended using min-height: calc(100% - 0);.
I didn't try it yet.