溢出-x滚动切断框阴影

Question

问题：我的var imageToCrop = document.getElementById('cropImage'); function getPicture(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#cropImage').attr('src', e.target.result) } reader.readAsDataURL(input.files[0]); reader.onloadend = (function () { $('#editPicture').modal('show'); }); } } $('#editPicture').on('shown.bs.modal', function () { cropper = new Cropper(imageToCrop, { viewMode: 2, dragMode: 'none', aspectRatio: 1 / 1, autoCropArea: 1, guides: true, cropBoxMovable: true, cropBoxResizable: true, minCropBoxWidth: 300, minCropBoxHeight: 300, toggleDragModeOnDblclick: false, modal: false }); }).on('hidden.bs.modal', function () { cropper.destroy(); cropper = null; }); $("#savePicture").click(function () { canvas = cropper.getCroppedCanvas({ width: 160, height: 160, }); canvas.toBlob(function (blob) { url = URL.createObjectURL(blob); var reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function () { var newProfilePic = reader.result; console.log(newProfilePic); $.ajax({ type: "POST", url: 'requests.php', dataType: "json", data: { imageBlob: newProfilePic, action: 'addImage', }, success: function(data){ console.log(data); $('#editPicture').modal('hide'); } }); } }); }); 切断了我的盒子阴影。看这里：

如何确保我的框阴影不被overflow-x切断？

这是我的css：

<!-- Modal Editar Foto -->
  <div class="modal" tabindex="-1" role="dialog" id="editPicture">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edite su </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body justify-content-center" id="cropArea">
           <div class="imageContainer">
            <img src="" alt="" id="cropImage">
           </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="savePicture" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#editPicture').modal('hide')">Cancelar</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Fin Modal  -->

  <h2 class="profile-subtitle"><?php echo l('You profile picture'); ?></h2>
  <div class="row">
    <div class=" col-md-12 profilePicture">
      <span>
        <img id="actualPicture" src="<?php echo getImg('users', $user->slug, 'extramedium', $avatarAPIsource); ?>" />

        <input type="file" class="d-none" id="customFile" onchange="getPicture(this)"/>
        <label class="btn btn-primary" for="customFile">
            <i class="fa white fa-camera" aria-hidden="true"></i>
        </label>

        <input class="d-none" id="newPicture" value='' type="file" name="newPicture">
      </span>
    </div>
  </div>

这是我的代码：

overflow-x