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.

Answer 1

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 browser, 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: stretch;
}

https://caniuse.com/intrinsic-width

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

Hope I could clear it up for you.