what is the usage of -webkit-fill-available?

Question

PIC-1

this is what I've ( pic-1 )

PIC-2

this is what I need ( pic-2 )

in the pic-2 I added

width: -webkit-fill-available;

I got what I expect. But I don't know how it's working.

user_13448829 · Answer

So there are two things you need to know about this:

 -webkit-fill-available;

the -webkit part is an extension for browsers such as safari or chrome, you can find more examples here: https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions This mean that this code will not work in firefox, to cover every browsers you could use something like that:

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

And the 'fill-available' part means the element will expand to take all available space in it's container. That's why your line stretched.

Hope I could clear it up for you.

what is the usage of -webkit-fill-available?

1 Answers