W3C home > Mailing lists > Public > www-style@w3.org > February 2014

Re: [css-flexbox] Flex box does not respect inline children/groupings

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 19 Feb 2014 18:18:18 -0800
Message-ID: <CALRQH7_ThtW92hxOXO1QgZWocRQvLCPgSq27RSus8g73m12BSA@mail.gmail.com>
To: Daniel Holbert <dholbert@mozilla.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Eric Eastwood <me@ericeastwood.com>, www-style list <www-style@w3.org>
On Wed, Feb 19, 2014 at 2:15 PM, Daniel Holbert <dholbert@mozilla.com> wrote:
> On 02/19/2014 01:48 PM, Andrew Fedoniouk wrote:
>>> On Tue, Feb 18, 2014 at 6:29 PM, Andrew Fedoniouk
>>> <news@terrainformatica.com> wrote:
>>>> According to this document http://www.w3.org/TR/CSS2/sample.html
>>>> (non-normative I believe though) <button> and <input> are
>>>> *inline-block* elements. And Eric was asking about purely display:inline
>>>> elements that do not generate boxes by themselves.
> [...]
>> I see this:
>> button, textarea,
>> input, select   { display: inline-block }
>> in http://www.w3.org/TR/CSS21/sample.html
> So, let's set those elements' display values aside for the moment.
> Even if we specifically targeted "display:inline" (not inline-block) and
> thereby avoided changing behavior for button/input, we'd still break
> <img>, because it's definitely "display:inline" by default, at least in
> Firefox/Gecko, Opera/Presto and Chrome/Blink. [the browsers/engines I
> have available locally to test]

<img> by its nature is inline-block element either.

display:inline mandates two things:

1. requirement to its container - <img> shall be replaced inline with
    surrounding glyphs and other inlines;
2. element itself does not establish box, 'width' and 'height' are not
    applicable to it.

Having img { display:inline; } defined by default breaks #2.

In any case changing defaults of img to { display:inline-block; }
must not break anything in standard conforming UA.

> (From briefly searching, I couldn't find any spec text saying that <img>
> should be display:inline by default, but it seems that browsers have
> converged on that behavior (probably long ago), and that's not likely to
> change.)

display:inline-block was introduced after display:inline was widely
accepted. UAs didn't update their default style sheets to
match the spec. For unknown reason.

> So the suggested change would still break any existing content that has
> <img> as a flex item, even if it wouldn't break <input>/<button>/etc.

It will not if UAs will fix their default style sheets to img {
display:inline-block; }

>> When you apply flexbox on span's container that span gets
>> treated as boxed element loosing its display:inline nature.
>> Check this,
>>   [sample code omitted]
>> two divs here should be rendered in the same way.
>> That's what Eric was asking about I believe.
> Yes, Tab already recognized and responded to that; see his first reply
> on this thread:
>  http://lists.w3.org/Archives/Public/www-style/2014Feb/0565.html

I understand.

Yeah, flexbox already breaks basic 'width' and 'height' properties,
and making it to ignore 'display' too will not change the
picture drastically, sigh.

Andrew Fedoniouk.

Received on Thursday, 20 February 2014 02:18:45 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:40 UTC