Почему входной размер с дизайном материала не ограничен вмещающим div?

Question

Я пробую дизайн материала и не знаю, чего здесь не хватает.

Я хочу использовать текстовый ввод и кнопку.

Ввод в пределах div,Я ожидал, что размер входного файла ограничен вложенным div.

. В этом случае я установил ширину вложенного div в 50px.

Однако вход только расширился и занял всю ширину.

Почему?

Снимок экрана:

Код:

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>



<div width="50px" padding="5px">
<input placeholder="Event Name" autocapitalize="off" spellcheck="false" autocomplete="billing email" data-trekkie-id="email_field" data-shopify-pay-handle="true" data-autofocus="true" data-backup="customer_email" aria-describedby="checkout-context-step-one" aria-required="true" class="field__input" size="30" type="text" name="checkout[email]" id="checkout_email"/>
</div>
<a class="waves-effect waves-light btn"><i class="material-icons right">check</i>OK</a>

Answer 1

попробуйте использовать макет столбцов, показанный в материализации:

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>


<div class="row">
<div class="col s5">
<input placeholder="Event Name" autocapitalize="off" spellcheck="false" autocomplete="billing email" data-trekkie-id="email_field" data-shopify-pay-handle="true" data-autofocus="true" data-backup="customer_email" aria-describedby="checkout-context-step-one" aria-required="true" class="field__input" size="30" type="text" name="checkout[email]" id="checkout_email"/>
</div>
</div>
<a class="waves-effect waves-light btn"><i class="material-icons right">check</i>OK</a>

Ссылка для документации: https://materializecss.com/grid.html