Firefox bug with float and nowrap? - css

Question

In this fiddle, why is B falling out of the yellow container?
http://jsfiddle.net/en7qfto1/
It does not happen in Chromium.
Is that a Firefox bug?
This is the code:
<style>
.a, .b
{
display: inline-block;
background: lightblue;
}
.b
{
float: right;
}
.c
{
background: yellow;
white-space: nowrap;
}
</style>
<div class=c>
<a class=a>A</a>
<a class=b>B</a>
</div>

Answer 1

Yes, this is a bug. You can find the Bugzilla ticket here.
David Baron points out the cause, which indicates in the code itself that this is due to a known limitation:
The cause is this code in nsLineLayout::ReflowFrame:
if (psd->mNoWrap) {
// If we place floats after inline content where there's
// no break opportunity, we don't know how much additional
// width is required for the non-breaking content after the float,
// so we can't know whether the float plus that content will fit
// on the line. So for now, don't place floats after inline
// content where there's no break opportunity. This is incorrect
// but hopefully rare. Fixing it will require significant
// restructuring of line layout.
// We might as well allow zero-width floats to be placed, though.
availableWidth = 0;
}
I wonder whether the right thing to do is:
not manipulate the available width at all, or
make the available width infinite, since the nowrap content is never going to wrap around the float anyway
(In theory, the correct solution is not to try placing the float until the following break opportunity. I wonder if other browsers do that.)
I actually think this is quite doable; we already defer layout of floats in mBelowCurrentLineFloats; we just need to do something similar and notify line layout at break opportunities. It's far from trivial, though. (We also need to place the float immediately if we're currently at a break opportunity... I think.)
I too wonder if that is what other browsers do (Chrome and IE behave the same, placing the float on the same line as the inline-block). Unfortunately I don't fully understand the interaction between floats and line breaks, so I can't comment further.

Answer 2

I ran into the same bug, and for me the best workaround was to use an equivalent flexbox layout: http://jsfiddle.net/nquyefaq/.
It behaves the same on Chrome, Firefox and IE11:
Both items render on the same line, with inline-block type behaviour.
The second item is right-aligned. (Instead of float: right it uses margin-left: auto.)
If the items have fixed width (mine do), the second item drops down onto the next line if the container becomes too narrow.
I hope this helps someone else looking for a workaround.