0

I have the following html/css:

.grid {
            display: grid;
            background: pink;
            width: 500px;
        }
        .grid {
            grid-template-columns: 1fr 2fr;
        }
    <div class="grid">
        <div>
            <select name="" id="">
                <option value="">select asd asda sdasd a sdas das dsdas das dasd</option>
            </select>
        </div>
        <input type="text">
    </div>

When The option value "select asd..." is short the design is correct - the select is 1fraction and the input is 2 fractions (as specified in style).

If the text is large (as above) the select became bigger and I cannot rely on css grid.

Is this a bug with css grid, and how can I fix it.

Thanks

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
  • The duplicate question doesnt solve my issue: even i set "grid-template-columns: minmax(1fr, 1fr) minmax(2fr, 2fr);" it doesnt work. I want always the select to be 1fraction and input 2 fractions - why is so hard with css grid? –  Apr 02 '19 at 11:11
  • the duplicate doesn't say `minmax(1fr,1fr)` but `minmax(0,1fr)` .. and it's not hard but simply need time to understand that 1fr isn't what you think – Temani Afif Apr 02 '19 at 11:13
  • and you need to add `width: 100%;` to the select since you will now have an overflow – Temani Afif Apr 02 '19 at 11:17
  • minmax(0, 1fr) shrinks the select sometimes. It does what it wants. I cannot say "the select is 1/3 the input is 2/3" –  Apr 03 '19 at 04:36

0 Answers0