<div class="container">

  <section class="demo">
    <h1>Элементы формы в гриде</h1>
    
    <!-- два изображения -->
<!--     <div class="grid">
      <img src="http://fillmurray.com/400/300">
      <img src="http://fillmurray.com/400/300">
    </div>
 -->
    <!-- два поля number -->
    <div class="grid">
      <input type="number">
      <input type="number">
    </div>

    <!-- два элемента progress -->
    <div class="grid">
      <progress></progress>
      <progress></progress>
    </div>

    <!-- два пустых поля -->
    <div class="grid">
      <input>
      <input>
    </div>
    <!-- два коротких бокса селекта -->
    <div class="grid">
      <select><option>Foo</option></select>
      <select><option>Bar</option></select>
    </div>
    <!-- два длинных бокса селекта -->
    <div class="grid">
      <select><option>это реальная ширина бокса селекта</option></select>
      <select><option>это реальная ширина бокса селекта</option></select>
    </div>
    <!-- поля внутри div -->
    <div class="grid">
      <div><input></div>
      <div><input></div>
    </div>
    <!-- селекты внутри div -->
    <div class="grid">
      <div><select><option>это реальная ширина бокса селекта</option></select></div>
      <div><select><option>это реальная ширина бокса селекта</option></select></div>
    </div>

    <!-- поля с типом file -->
    <div class="grid">
      <input type="file">
      <input type="file">
    </div>
    <!-- кнопки submit -->
    <div class="grid">
      <input type="submit">
      <input type="submit">
    </div>
    <!-- поля reset -->
    <div class="grid">
      <input type="reset">
      <input type="reset">
    </div>
    <!-- короткие кнопки -->
    <div class="grid">
      <button>Приветик</button>
      <button>Приветик</button>
    </div>

    <!-- длинные кнопки -->
    <div class="grid">
      <button>Приветик, приятель, как дела?</button>
      <button>Приветик, приятель, как дела?</button>
    </div>
    <!-- кнопки внутри div-ов -->
    <div class="grid">
      <div><button>Приветик, приятель, как дела?</button></div>
      <div><button>Приветик, приятель, как дела?</button></div>
    </div>

  </section>
 
  <header>
    <p>Сегодня я узнал, что из-за элементов <code>input</code> в гридах они перестанут быть адаптивными. Это можно пофиксить в Chrome, удалив min-width (который видимо не указан в отладчике). Текст/изображения сжимаются как и ожидалось. Инструкция:
</p>

    <ul>
      <li>Поизменяйте размер окна до появления горизонтального скроллбара.</li>
      <li><strong>Ожидание:</strong> нет горизонтального скролла, контент продолжает сжиматься.</li>
      <li><strong>Реальность:</strong> поля перестают сжиматься и появляется горизонтальная полоса прокрутки

    </ul>
    <p>Шаг 1: Удалить `min-width: auto` из элементов грида. </p>
    <button id="removeMinWidth">Применяем к ним min-width: 0.</button>
    <p>Шаг 2: Добавляем max-width.</p>
    <button id="addMaxWidth">
Добавляем max-width к контролам формы.
</button>
    <p>Шаг 3: Заставляем поля с типом file и submit переносить текст</p>
    <button id="wrapText">Заставляем поля переносить текст</button>
    <p>Шаг 4: Задаём range, number, и progress полную ширину: </p>
    <button id="width100">Задаём этим типам контролов max-width
</button>
    <p>Если сделать ещё один шаг и задать ширинам input/select `width: 100%`, то шаги 1 и 2 не понадобятся. Но шаг 1 исправляет ещё одну проблему (`overflow-x` на элементах), а шаг 2 кажется разумным значением по умолчанию.
</p>
  </header>
</div>