Flexbox issue while aligning radio button

Question

I am trying to align radio button and its label by making its parent element display: flex;.

However, when a radio button's label contains multiple lines, the radio button becomes narrower, even though its width is explicitly defined.

Here is my html/css

label {
  display: flex;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"] {
  width: 12px;
  margin-right: 1em;
}

<div class="flex-radios">
  <label>
 <input type="radio" /> Lorem ipsum.
  </label>
  <label>
 <input type="radio" /> Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.
  </label>
</div>

Answer 1

As the text content of label gets longer, it expands to fill more width, until the text uses 100% of available width and must start breaking lines. Since the default value of flex-shrink is 1, the <input type="radio"> loses width proportionately as the text grows, causing the radio button (or the apparent "margin" around it) to appear smaller. Or, if you have it custom styled as in your screenshot, squeezed.

To avoid that, add flex-shrink: 0 to the input's CSS rule, so it will not shrink from its default size even as its siblings take up all available room in their shared flexbox.

label {
  display: flex;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"] {
  width: 12px;
  margin-right: 1em;
  flex-shrink: 0;
}

<div class="flex-radios">
  <label>
 <input type="radio" /> Lorem ipsum.
  </label>
  <label>
 <input type="radio" /> Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.
  </label>
</div>