html - CSS - Flexbox - inline list when the text fits -

i've got list of radio buttons structured this:

and i'd use flexbox display them horizontally when there's enough space, follows:

however, stands, i'm using min-width media query perform breaking, text overflow can occur:

.radio-btn-label {   width: 100%;   height: 40px; }  @media screen , (min-width: 900px) {   .radio-btn-group {     display: flex; } 

is there constraint can put on either individual flex children, or on container, prevent flex layout causing text overflow?

at moment, html structure follows:

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

the .label-text class styled, , gives border , background list element. (this can use input[type='radio']:checked + .label-text selector style differently when it's button selected).

css can't define if element overflow. combination of tricks can useful. truncate string ellipsis + filling space in last row flexbox.

just try 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 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>