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.

Centralia

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 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.

Ulu

thanks, Dendenzilla. I got cleared up now. will try what you suggested. – Centralia

Glad I could help, if so please check the answer as a resolution to the problem so this topic can be closed. Have a nice day. – Ulu

from what i can tell, fill-available is similar to 100%, but won't cause an overflow if there are margins/padding/borders – Meissen

Having a hard time finding documentation about fill-available. This thread is the most info I could find :( – Dramaturgy

@Meissen So basically fill-available is 100% with box-sizing: border-box ? – Scoot

not exactly, because it also takes margins into account (as well as padding on the parent element) – Meissen

Will this be a 'thing'? It's really good! – Morley

Answer 2

I suggest a more modern solution is to use fit-content instead.

See MDN fit-content and Can I Use fit-content

Note that, at the time of this post, Can I Use states that Samsung Internet still requires -webkit-fill-available for min-width.

Spicer

fit-content is different than fill-available. Try experimenting with height: 100% vs fill-available in a parent/child scenario, then throw in fit-content for comparison. – Ecclesiasticus

@MagnusLindOxlund Yes, fit-content is different to fill-available. However, I believe fit-content can be used to provide the OP, and others, with a better solution. I don't believe it warranted a downvote. – Spicer