CSS - Flexbox - inline list when the text fits

Question

I've got a list of radio buttons structured like this:

and I'd like to use flexbox to display them horizontally when there's enough space, as follows:

However, as it stands, I'm using a min-width media query to perform the breaking, so some text overflow can occur:

.radio-btn-label {
  width: 100%;
  height: 40px;
}

@media only screen and (min-width: 900px) {
  .radio-btn-group {
    display: flex;
}

Is there some constraint I can put on either the individual flex children, or on the container, to prevent the flex layout from causing the text to overflow?

At the moment, the HTML structure is as follows:

<div>
  <label class="radio-btn-label">
    <input type="radio">
    <div class="label-text">Foo</div>
  </label>
</div>

the .label-text class is styled, and gives the border and background for the list element. (This is so I can use a input[type='radio']:checked + .label-text selector to style it differently when it's button is selected).

Answer 1

CSS can't define if some element is overflow. But combination of some tricks can get you something useful. Truncate String with Ellipsis + Filling the Space in the Last Row with Flexbox.

Just try to resize. Codepen

/* **************
   Quick Reset
************** */
html {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #3da7b4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  padding: 2rem;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* **********
   Style
********** */
.Fieldset {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #017480;
}
.Fieldset__legend {
  opacity: 0.99;
}
.Fieldset__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-size: calc(2vmin + 2vmax);
  color: #017480;
}
.Fieldset__content {
  opacity: 0.99;
}
.Fieldset__input-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.Fieldset__label {
  opacity: 0.99;
}
.FluidLabel {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 160px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #d8d8d8;
  border: 1px solid #979797;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.FluidLabel__input {
  margin: 10px;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}
.FluidLabel__input:checked + .FluidLabel__text {
  color: #017480;
}
.FluidLabel__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<fieldset class="Fieldset">
  <legend class="Fieldset__legend">
    <h1 class="Fieldset__title">CSS - Flexbox - inline list when the text fits</h1>
  </legend>
  <div class="Fieldset__content">
    <p class="Fieldset__input-group">
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">Label</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
    </p>
  </div>
</fieldset>