Flexbox resizes a checkbox (too small)

If you add min-width to the input in addition to width it appears to resolve the issue for me.

input[type=checkbox]{
    margin-right: 2rem;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

You can set flex:none on items you don't want resized as part of flex calculations.

The following Information is from Tailwind CSS documentation but this applies to pure CSS too: https://tailwindcss.com/docs/flex#none

Use flex: 0 1 auto; to allow a flex item to shrink but not grow, taking into account its initial size.

Use flex: 1 1 0%; to allow a flex item to grow and shrink as needed, ignoring its initial size:

Use flex: 1 1 auto; to allow a flex item to grow and shrink, taking into account its initial size:

Use flex: none; to prevent a flex item from growing or shrinking:

Add for the inputs:

flex: 1;

And for the labels:

flex: 2; 

It works for me on chrome, firefox, IE.