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>

Rosana

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>

Selection

Thanks. Both the solutions are working like a charm. :) – Rosana

Answer 2

Specify width for the input.

.mg-radio{
display: flex;
}
.mg-radio input{
min-width: 30px;
height: 16px;
margin: 0 10px 0 0;
}

<label class="mg-radio">
    <input type="radio"  >
    <span class="radio-label" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate maxime debitis commodi totam, quia perspiciatis vel blanditiis iste sed tempore adipisci illum aperiam, obcaecati voluptatum mollitia natus at, neque nihil.</span>
  </label>

Settee

Did you try this then shrink the page size? It fails by shrinking the radio as opposed to squashing it, but still fails imo – Hobo

changed to min-width. now it dosen't shrink. – Settee