This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
We use flexbox heavily for an desktop application like looking web app and it has been working out great.
But with the latest Firefox Developer Edition (35.0a2) the layout does not behave as expected (it grows beyond the viewport): http://tinyurl.com/k6a8jde
This works fine in Firefox 33.1.
I would assume this has something to do with the flexbox changes described here:
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
But sadly I can't yet figure out a way to get the FF 33.x behavior in FF 34 or 35.x.
Any help regarding the layout or how to better isolate the problem is appreciated.
The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)
The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 } (or min-width, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).
Updated fiddle, with that change:
http://jsfiddle.net/yoL2otcr/1/
Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:
is a child of a 'column'-oriented flex container
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)
(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0 all the way up, unfortunately.)
(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
It is more simple than that
Just give the flex children
.flex-child {
flex: 1;
overflow: hidden;
}
without using min-width: 0 hack
none of these fixes worked for me, even though they work. In my case, I was supplying a display: table-cell fallback, which seemed to be taking over. Using SASS, including it like this, the fallback works for IE without affecting FF:
flex: auto; // or whatever
.ie & {
display: table-cell;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Edit: Resolved. Rather than resetting the Zoom to 100%, the "View < Actual Size" resolved the issue.
I've been having an issue with Chrome rendering divs as fractions and not exactly as the specified numbers.
For example:
HTML
<div class='tile'>foo</div>
CSS
.tile {
background-color: #CCCCCC;
border-width: 2px;
border-style: outset;
display: table;
float: left;
}
Rather than being rendered as 2px, the border-width is "1.8181817531585693px" inferred both from the Chrome Developer Tools > Elements > Computed and using the debugger with jQuery .css function.
A few additional things to note is that this only happens when it's loaded on an FTP, not locally. This issue also doesn't occur in either Firefox or Safari. Any ideas or explanation as to what exactly Chrome is doing, or the solution to it would be much appreciated. Thanks!
The short answer is they are dealing with real numbers that are binary internally, and things must be done quickly.
So some numerical corners are probably being cut, that are normally not noticeable to the average web page viewer, that is if a page is designed so that it is not noticeable.
Go figure, I know, you would think that browsers would be more accurate, but I have found that even with the most careful and detailed control of my css, there seem to be rounding errors that play havoc with small details when displayed.
First, I would suggest you use em rather than px. I know you might have to start over with your css, but I have found it to be more reliable, screen to screen. Remember modern pages are not based on pixels. They are dynamic beasts that can be zoomed in and out, and squished narrower and still must output something reasonable.
Also I would suggest rethinking how you are laying out your page so such small details are not an issue. In carpentry the skilled artisan knows how to hide the rough edges with a molding.
I have a very accurate web page I use to generate to a special printed flyer. It was a royal pain to force html and css into something they didn't want to do, which was be accurate.
Also I can test my production site on the 5 major browsers, right on top of each other so I can see little differences when I switch between them, from one browser to another. They are all off just a little from each other in various ways, and really there is no way to make them accurate.
I'm wondering if that (my title) is ever incorrect, other than for HTML validation. I've recently had to start supporting IE7 again (I've been lucky enough to not have to for the past 3 years or so) and the fact that div's can't be inline-block has gotten me about 10 times in the past month due to the fact that I make everything a div by default and then go back and stylize elements. So I'm considering making everything a span so that if I later go back and make something inline-block I'm not trying to figure out why it's not working in IE7.
So my question -- Is there ever a case, in any browser (IE7+, FF, Webkit, Opera), that anyone knows of where a span can not act like a div? I'm not concerned about the HTML not validating due to having block elements inside inline ones.
I'm not going to directly answer your question, but I think this is worth saying.
I've recently had to start supporting
IE7 again (I've been lucky enough to
not have to for the past 3 years or
so) and the fact that div's can't be
inline-block has gotten me about 10
times in the past month
You can use display: inline-block in IE7 for block-level elements such as divs, with:
selector {
display: inline-block;
*display: inline;
zoom: 1
}
If you don't want to use an invalid but safe CSS hack (*property), you can use conditional comments.
This may be of help: SPAN vs DIV (inline-block)
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Mine would have to be the float and margin bugs...
If you float an element, and then specify a margin for it, it will double the margin.
The solution to this is to add display: inline to the element. This will stop the double margin, and all other browsers will ignore it because only block level objects can be floated.
I wish I'd known that I'd be spending hours trying to fix a bug in IE 6 over and over again for years on end and I really would have been happier delivering pizza.
I wish I knew about quirksmode.org. The compatibility tables, bug reports, javascript examples are all very useful.
Don't code for IE6 first. That's the path to madness.
I wish I'd known that many IE 6 error line numbers are off by one.
Number one thing: hasLayout
If I had known about this from the start most of my worries would've been solved.
I even regard it as a worse problem than IE6's stupid box model.
That if your really anal and spend shit loads of time on it that it pays off and you then become an IE guru fearing nothing but the sad self you have become...
Although it is nice to impress people with your amazing IE bug fixing abilities...
Most IE bugs can be avoided by using different (normally better) CSS methods and super clean logical xhtml
Always clear your floats with overflow hidden (or just hasLayout for IE)
Understand what hasLayout is (basically a css porperty that gives IE a kick in the ass)
When you start devving sites check IE6 all the time, untill your a pro ;¬P
Unfortunately, and I do train a small team of 6 developers, experience is one of the only things that really helps with these problems, stay calm, do good research in google and post your problem to a community if you really are stuck with a good demo of the problem.
Nice links >
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ (although I recommend the PNG fix by Bob Osola /-0)
http://www.gtalbot.org/BrowserBugsSection/ (amazing and funny... great!)
Good luck!
I wish I'd known why Microsoft hated me so much.
I wish I'd known about Position is Everything, but specifically the peekaboo bug has always got me.
I wish I'd known about
the conditional comments to include stylesheets just for IE
xhtml headers to make IE render in compliant mode
the box model problem, so that I knew what to put in my IE stylesheet
After I learned about these things, I haven't really used a lot of time fixing problems in IE6
.Hauge
Transparent PNG should have been supported...
the underscore trick
if you put an _ infront of the css atribute it only gets read by ie6.
ie. _border: 1px solid #000000;
creates a border only in ie6
Probably that SELECT elements dont render with the correct z-order.
For example, if you have a floating DIV with a higher z-order overlayed on top of a select - the SELECT element will still render on top of the DIV.
Infuriating.
The rendering quirk which causes a small white space underneath an image in a table cell if there is any white space between the end of the img tag and the closing td tag.
This renders right:
<td><img src="myimage.jpg"></td>
This renders wrong:
<td>
<img src="myimage.jpg">
</td>
The main problem we have had is with scheduling enough "fix in IE6" time. That and the designers' tendency to come up with stuff that is easy to do in Flash and tricky to achieve in CSS has cost us many days of extra work.
I wish I knew that my code didn't validate. Or that an XML declaration in XHTML puts IE into quirks mode.
http://www.pushuptheweb.com/ or one of many other sites pushing to drop IE6 support. I'm aware that rendering web pages correctly for IE6 visitors is the core of many web businesses, but sooner or later something has to give. I just dont get why MS doesn't force an update >.<
That even with all the PNG hacks in the world, if you're using PNGs as backgrounds in your divs (to make, for example, a panel with rounded borders), you're headed for a world of pain. (Links and other elements not being clickable, IE6 crashing in earlier versions of the png dll, etc.)
In summary: don't use transparent background PNGs if you want it to work in IE6.
The importance of DOCTYPES in IE, and
Web Bug Track
I Wish I'd Known That Internet Explorer Is The New Netscape Navigator 4.7.x
1
hasLayout and this excellent explanation:
http://www.satzansatz.de/cssd/onhavinglayout.html
I had a new lease on life once I'd wrapped my head around it! Ensuring that the containing element hasLayout fixes the vast majority of my problems.
2
jQuery!! Writing IE-specific CSS is bad enough, so I'm glad I rarely have to worry about JS anymore.
I wish I'd known about dev tools like Firebug Lite and HttpWatch that make debugging lots easier.
in addition to other IE bug lists that Ross and Loque gave above (gtalbot.com, what a beautiful site!
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
http://webbugtrack.blogspot.com/search/label/IE7
http://www.enhanceie.com/ie/bugs.asp
http://channel9.msdn.com/wiki/internetexplorerprogrammingbugs/
(like gtalbot, it'll take you hours to scroll thru this
and, hey, IE 8 beta 2
http://css-class.com/test/bugs/ie/ie-bugs.htm
finally, the IE voodoo doll!
http://www.flickr.com/photos/chisa/1349759901/
*{margin:0; padding:0; border:none}
i swear to god this line changed everything. presto! everything is the same size! and then i dove into the rabbit hole that ya'll find me in now. marvelous.