将输入类型设置为数字会使输入宽度更短

我正在通过Contact Form 7使用wordpress插件进行表单 . 几乎没有样式，只是简单的显示：flex;因此我可以在一行中有两个输入，每个父容器的总容量为100％ . 但是，当我将一个输入类型更改为数字而不是文本时，该输入会缩小并变得更短，并且我有这种奇怪的间距 . 我尝试过很多东西，改变显示，宽度，填充，什么都有，但没有任何帮助 . 使这个数字输入更大的唯一因素是为输入[type = number]设置固定宽度，但这不是我需要的，我需要flex显示来完成所有工作，并使每个字段占所有屏幕尺寸的50％ .

我错过了什么吗？为什么数字字段的行为如此奇怪？

这是数字输入类型设置的样子：

div.wpcf7 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.wpcf7-form input {
  display: flex;
  flex: 0 0 100%;
  border: none;
  border-radius: 0;
  background: #eeeeee;
}

<section id="text-6" class="widget widget_text">            <div class="textwidget"><div role="form" class="wpcf7" id="wpcf7-f231-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/wordpress/#wpcf7-f231-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="231"><br>
<input type="hidden" name="_wpcf7_version" value="4.9.2"><br>
<input type="hidden" name="_wpcf7_locale" value="en_US"><br>
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f231-o1"><br>
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<div class="first-group">
<label><br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" placeholder="Your name here"></span> </label><p></p>
<p><label><br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Organisation"></span> </label>
</p></div>
<p><label> Area of interest<br>
   <span class="wpcf7-form-control-wrap your-country"><select name="your-country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false"><option value="Equipment">Equipment</option><option value="Sell">Sell</option><option value="Buy">Buy</option></select></span></label></p>
<div class="second-group">
<label> Contact me by:<br>
    <span class="wpcf7-form-control-wrap your-message"><input type="number" name="your-message" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number form-control" aria-invalid="false" placeholder="Phone:"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email:"></span> </label>
</div>
<div class="contact_cta"><input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit btn btn-primary"><span class="ajax-loader"></span></div>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
</div>
        </section>