4 ms·
Its not the same thing. min-content/max-content/fit-content etc for these form control elements are some magical value (for textareas "1lh * attr(rows)") for ex
by bfgeek 3y ago
Its not the same thing. min-content/max-content/fit-content etc for these form control elements are some magical value (for textareas "1lh * attr(rows)") for example. (This works cross browser!)
min-content/etc get invoke in more places than you'd expect. For example:
<table>
<tr>
<td>
<input style="width: 100%">
</td>
</tr>
<tr>
<td>
<input style="width: 100%">
</td>
</tr>
</table>
Here when initially sizing the table the "width:100%" will actually be "width:min-content". (We can't change how this works, it'll break sites, and I'm oversimplifying slightly).
This property is basically a switch to say "don't use the magical values for the intrinsic sizes size based on your content instead".
With the new form-sizing property (or whatever it gets named) all the inputs in that table will be sized to the maximum input.
I understand its frustrating but changing a 20+ year platform isn't an easy/simple affair sometimes :).
- bfgeek 3y agoAdditionally this property disables the "compressibility" hack which browsers invoke currently. (jsfiddle for previous example: https://jsfiddle.net/vk8fy1bz/ https://jsfiddle.net/vk8fy1bz/ )
- pests 3y agoCompressibility hack?
- john_the_writer 3y agoI was wondering the same thing. The fiddle didn't do anything. Two input boxes is all I got.