小程序input显示不全，点击后半部分也不能获取到焦点

问题截图和代码

明明设置了充满，但是input显示不全，点击后半部分也不能获取到焦点，后来发现是要去掉input样式中的
display: flex;
属性即可解决，详细请看下面截图以及代码：

布局：

<!--搜索框-->
	 <view class='search_view'>
    <icon class="search_icon" type="search" size="14"></icon>
    <!-- <view class='class_input'></view> -->
    <input placeholder='输入关键字' bindinput='search' placeholder-class='class_input' class='edit_search'></input>
    <text bindtap="cancle" class="cancle_search">取消</text>
  </view>

样式：

.search_view {
  width: 90%;
  display: flex;
  flex-direction: row;
  margin: 16rpx auto;
  height: 84rpx;
  background: rgba(245, 245, 245, 1);
  border-radius: 20rpx;
  align-items: center;
}

.search_icon {
  margin-left: 33rpx;
  padding-right: 24rpx;
  display: flex;
}
.edit_search {
  min-width: 70%;
  display: flex;//重要属性
  color: rgba(173, 173, 173, 1);
  font-size: 28rpx;
  font-size: #616161;
}

.class_input {
  font-size: 28rpx;
  font-family: PingFang-SC-Regular;
  font-weight: 500;
  color: #C9C9C9;
}
.cancle_search{
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(97,97,97,1);
  padding: 10rpx;
  display: flex;
}
@keyframes rotate
{
from {transform:rotate(0) ;}
to {transform:rotate(360deg);}
}
@-webkit-keyframes rotate
{
from {transform:rotate(0) ;}
to {transform:rotate(360deg);}
}
.loading.complete:before{
  display: none;
}
::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;

}

解决方式

去掉input标签里的
display: flex;
样式，即可解决

.edit_search {
  min-width: 70%;
  display: flex;//去掉此属性
  color: rgba(173, 173, 173, 1);
  font-size: 28rpx;
  font-size: #616161;
}