16

Is there an alternate way to fill the available space of nested divs in Google Chrome? Firefox's -moz-available does just that, but takes margins, paddings and scrollbars into consideration. There is no -webkit-available, though.

2
  • Care to share an example, please? Commented May 10, 2011 at 11:47
  • Test case: I have two divs, one inside of another. The one on the inside has margins, padding and borders. In order to fill the width of the outer div with the on on the inside, I just put width:-moz-available; and don't have to calculate anything. Putting 100% for the width of the inner div will not work because of the padding, margins and borders - it will be wider. In webkit, "width:-webkit-available" doesn't work.
    – Vanco
    Commented May 12, 2011 at 7:12

3 Answers 3

30

Try this.

elem {
  width: 100%;
  width: -moz-available;          /* For Mozzila */
  width: -webkit-fill-available;  /* For Chrome */
  width: stretch;                 /* Unprefixed */
}
11

What about this?

box-sizing: border-box;
1
  • I think that this did the trick. Although, Chrome should include "available"
    – Vanco
    Commented Apr 22, 2012 at 17:56
-2

-moz-available = container width - (margin + border + padding) so try width: intrinsic;.

1
  • Thanks for the answer. Unfortunately, it's not working. I guess I'll just have to go with calculating the widths in pixels...
    – Vanco
    Commented May 12, 2011 at 7:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.