See this example: http://jsfiddle.net/vrgT3/5/
I made a 250x250px parent div with overflow: auto; so scrollbars appear when the content overflows the box. I have set a blue background to make it clear when the parent is visible.
Inside the parent is a child div with red background for visibility. It has 8px black borders and box-sizing: border-box; so padding and borders are included in computing the size of the box. The child div is set to min-height: 100% and min-width: 100%.
Expected result: Child div should be the exact same size as the parent, so no blue is shown and no scrollbars appear. The computed box size (content+padding+borders) should be 250x250px. There should be 8px black borders inlaying this, leaving a 234x234px red region.
Works with:
Midori 4.1 Ubuntu
Chromium 16 Ubuntu
Opera 11.61 Ubuntu
Issues with:
IE 8 WinXP: Horizontal and vertical scrollbars appear. The content is 249x266px with 8px borders giving a computed box size of 265x282px.
Firefox 3.6 WinXP: Vertical scrollbar appears. The content is 217x250px and computed box size is 233x266px.
Firefox 10 Ubuntu: Vertical scrollbar appears, content is 221x250px, computed box size is 237x266px.
I have checked caniuse.com and it appears that at least the browsers in question support the required min-height, min-width, and box-sizing. What gives?
Solution: As Marat suggested, this is indeed a browser bug. I've resolved a workaround utilizing JavaScript to add padding/margins to correct for differences in offsetWidth/Height. See it here: http://jsfiddle.net/vrgT3/8/
This is unfortunate bug of Firefox (see bug 308801) and IE8 (IE9 works correctly).
The bug is fixed in Firefox 17+.
Related
I've tried searching for this but found nothing. Might be using the wrong keywords. I made a gfycat of the problem.
https://gfycat.com/BrownHighErin
I have content, I click on it in IE, and things resize. Everything is flexbox display model, there are no anchor or button tags, it's just an image on the left and a table on the right wrapped in some divs. The project has a massive number of pages all using flexbox. This is the first I've seen this happen. I have been able to fix it with pointer-events: none but I'd rather not use that solution.
Another thing, the IE inspector does not show a change in the width of the element when this happens. It always shows the pixel width that the image should be, but not what is displaying.
Works in Edge, Chrome & Firefox
Without seeing your code, it's impossible to say for sure what the issue is. If it's only happening in IE, it's likely a compatibility issue. IE only has partial support for flexbox, as shown on CanIUse.com.
Some of the know issues with IE and flexbox include:
IE 11 requires a flex-basis property to be added
IE10 and IE11 containers may calculate any flexed childrens' sizes correctly if the container has a min-height but no height property set, and if the container uses display: flex and flex-direction: column
IE10 defaults flex to 0 0 auto, not 0 1 auto
See the CanIUse flexbox page for more details.
I'm trying to create a fluid layout, so I used a width in %. I tested the site on Chrome, Safari and IE. When it worked fine in IE I thought my work was done, however when checking it in Firefox I realized the width was incorrect. EG: two 50% elements wouldn't fit in one line neither 3 elements with 33% width. This is an example from my site:
http://pranalog.com/example.php
How can I get this to work on Firefox (or on the most browsers)?
You have box-sizing: border-box; set on the div's, to set border-box in Firefox, add:
-moz-box-sizing: border-box;
to your style rule. This is needed to get box-sizing to work in Firefox, setting this property to border-box forces the browser to render the div's with the specified width and height, and places the border and padding inside the div's.
This in turn fixes your issue: with the border rendered on the outside of your div's, the total width of your elements is essentially 3 times 33.3% = 99.9% plus 6px needed to render the the six 1px wide borders on the right and on the left of each div. Since 6px is more than the 0.1% of the page width that is left, the last div doesn't fit on the same line anymore and moves down to the next line.
With the border rendered inside the div's by setting border-box properly, you won't have this issue.
Here's a fixed up jsFiddle
It's because you have a border of 1px, try removing the border value and all three fit side by side.
If you would like to keep the border then just reduce the width to around 32%
Good luck
I have a DIV in a table. This code is generated by GWT, so I don't have a lot of control over the elements that are used (which is to say that I know tables are usually not the best element for layout, but this is not something that I have direct control over).
In Firefox, a DIV with 100% height spills out below the table, while in Chrome the DIV are sized as I would expect. What is going on?
So this one had my pulling out my hair for a while, but it turns out that the DIVs in Firefox were defaulting to box-sizing: content-box setting, while in Chrome they were defaulting to the box-sizing: border-box setting. Because I was using padding in the DIV, this was causing Firefox to display the DIV with a height of 100% plus the padding.
The solution was to just specify -moz-box-sizing: border-box in the CSS for the div.
The issue I'm having can be found here:
http://jsfiddle.net/boblauer/5uVrK/
If you look at it in Chrome, you'll notice that when you scroll to the right, it stops immediately at the right edge of the last green box. However, in FF and IE (haven't tried others), it will correctly scroll a bit past the last green box.
Since .lane-container has a width of 2000px and the boxes should take up a width of 1700px, there should be 300px extra to the right of the last box, but in Chrome there is not.
Any ideas on why Chrome behaves differently than the others, and how I can work around it?
Setting the display to inline-block instead of float: left fixed the issue for me. Floating block level elements takes them out of the dom flow. That doesn't really explain why this doesn't work, but this is a workaround. I always prefer inline-block over floating left.
Edit
After some more jsfiddling, it seems chrome isn't showing the container div's full width because it's empty. As soon as you add a border around lane-container it works as expected, although, since you're floating the inner divs left, they aren't in the dom float and lane-container appears to have a height of 0.
I'm using an image which must auto-scale inside a div whose height is defined by the root div.
The scaling is fine in all major browsers, using height: 100% on the image itself.
But it seems that on some browsers, the image container doesn't adapt its width accordingly to its content (the image).
Check by yourself the live demo.
This demo uses an image container with a blue background.
Expected behavior: This background shouldn't display since the container width and height should be the same as its content (the image).
Actual behavior:
On Chrome 11, Safari 5 and IE9, the behavior is as expected.
(source: imgh.us)
On Firefox 3.6/4.0 and Opera 11, the behavior is not as expected: the blue background is displayed.
(source: imgh.us)
What is the root cause of this strong difference between major browsers?
In the case of Firefox, this looks like a bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=653739
You can work around by removing the overflow:hidden unless you actually need it.
Those later browsers interpret inline-block more strictly (correctly).
That is, your element is positioned inline (like a span), but the element's contents are laid out as if the element were a block.