css 盒子布局的问题

在微信小程序之中，对盒子布局的时候，我们要注意布局大小不要超过页面的宽度，否则会出现布局混乱的问题

这是.wxml内容：

 <view class="encryption" animation="{{encryptedAnimation}}">
        <view class="passAndEncrypt" >
          <input password placeholder="加密密码" focus="{{encryptedInputFocus}}"  value="{{encryptedPassword}}" class="encryptedPass" bindinput="inputEncryptedPass"  maxlength = '-1' />
          <button class="encryptedTextBtn" bindtap="copyEncryptedText">复制密文</button>
        </view>
        <textarea  placeholder="{{encrypedPlaceholderOri}}" focus="{{originalTextFocus}}"  maxlength='-1' value="{{originalText}}" bindinput="keyboardInput" />
        <button class="clickEncryptBtn" bindtap="clickEncrypted">点击加密</button>
        <textarea placeholder="{{encrypedPlaceholderEnc}}"  maxlength='-1' value="{{encryptedText}}" />
 </view>

这是.wxss

.encryption{
  box-sizing: border-box;
  display: block;
  padding:0px;
  margin-left:20px;
  margin-right:20px;
  width:100%;
  min-width: 310px;

}

如上所述，width:100%，margin-left和margin-right是20px，这样子肯定会把盒子撑大，所以布局就显示混乱。改成下面这样就OK了

  margin-left:auto;
  margin-right:auto;
  width:90%;