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

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.

http://terrainformatica.com

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