Add stretch value to length width, height styles.

[goldnite]

Stretch is not supported currently.

I think it would be nice if we add these values.

.w-stretch {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

.min-w-stretch {
  min-width: -webkit-fill-available;
  min-width: -moz-available;
  min-width: stretch;
}

.max-w-stretch {
  max-width: -webkit-fill-available;
  max-width: -moz-available;
  max-width: stretch;
}

.h-stretch {
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}

.min-h-stretch {
  min-height: -webkit-fill-available;
  min-height: -moz-available;
  min-height: stretch;
}

.max-h-stretch {
  max-height: -webkit-fill-available;
  max-height: -moz-available;
  max-height: stretch;
}

[tobi1220]

I think we should start by adding stretch for the width and height property since this is now supported by all browsers. For the other properties however, this value is not supported that well.

Supported:

• height https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility
• width https://developer.mozilla.org/en-US/docs/Web/CSS/width#browser_compatibility

Not supported by all:

• min-height https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#browser_compatibility
• max-height https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#browser_compatibility
• min-width https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#browser_compatibility
• max-width https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#browser_compatibility

[o-t-w]

Chrome and Firefox are working on unprefixing the stretch keyword. Safari have not officially stated that they think this feature is a good idea. I would hold off until it is clear Safari will support this eventually, but I hope that's soon.

WebKit/standards-positions#401