Как исправить ширину input checkbox внутри flex элемента с фиксированной шириной?

.box {
  display: flex;
  border: 1px solid #333;
  width: 60px;
  padding: 3px;
  overflow: hidden;
}

input[type="checkbox"] {
  width: 16px;
    height: 16px;
    margin: 0 3px 0 0;
    transform: translateY(1px);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .25);
    appearance: none;
  background-color: #0d6efd;
    border-color: #0d62f2;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M6 10l3 3l6-6'/%3e%3c/svg%3e);
}
input[type="checkbox"]:checked {
    background-color: #0d6efd;
    border-color: #0d62f2;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

<div class="box">
  <input type="checkbox"> id12345235235
</div>
<input type="checkbox">