Responsive behaviour breaks

[andreasvirkus]

Expected Behavior

On narrower containers (and viewports), the strength meter should fluidly resize (become smaller in width by keeping its 5 evenly sized sections).

Actual Behavior

Meter's mid block is the only part that goes narrower and after X width actually becomes wider again, eating away at other blocks.

How to reproduce

Go to this plugin's demo page, slap a

<meta name="viewport" content="width=device-width,initial-scale=1.0">

into the document's head and then resize the viewport or restrict the parent via CSS:

#app {
  max-width: 22rem;
}

Environment

• OS: OSX (although doubt it's OS-related)
• NPM version: Should not matter
• vue.js version: 2.5.16
• vue-password-strength-meter version: 1.3.2