CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

I have a set of radio buttons arranged like this:

https://i.sstatic.net/l4uhp.png

I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this:

https://i.sstatic.net/IGUAc.png

However, the current setup uses a min-width media query for layout breaking, which can lead to text overflow:

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

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

https://i.sstatic.net/Z5J2t.png

Is there a way to add constraints on either the individual flex items or on the container itself to prevent text overflow in the flex layout?

Currently, the HTML structure looks like this:

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

The .label-text class has styling with borders and background for the list element. This allows the use of 

input[type='radio']:checked + .label-text
selector for different styling when the button is selected.

htmlcssflexbox

Answer №1

CSS alone cannot determine if an element is overflowing. However, by combining various techniques, you can achieve some useful results. Check out this guide on Truncating Strings with Ellipsis and learn how to Fill the Space in the Last Row with Flexbox.

Give it a try by resizing. View the Codepen here

/* **************
   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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turn off all the styles associated with a specific CSS selector

Looking for a solution to override CSS rules for the .lp-caption selector? .lp-caption { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; backgr ...

css

What are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly al ...

jqueryhtmlcss

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

javascriptjqueryhtml

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Following the official guidelines: To include React in a website, visit https://reactjs.org/docs/add-react-to-a-website.html I have created a file named test.html with the following content: <!DOCTYPE html> <html> <head> < ...

javascripthtmlreactjs

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

When you hover the cursor over it, the material-ui icon button shines with an elliptical background effect

There seems to be a strange issue with the IconButton in @material-ui/core/IconButton that is causing a weird elliptical background to appear when hovering over it. https://i.stack.imgur.com/Xof8H.png Even after copying the code directly from the materia ...

cssreactjsmaterial-ui

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

javascripthtmlnode.jsangularjs

What is the best way to ensure that the content on my webpage stays below the navbar, no matter the height of the

I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the na ...

htmlcssresponsive-designscreen-orientation

Create an interactive mechanism where one scrollbar dynamically adjusts another scrollbar and vice versa

Using the provided js-bin, how can I synchronize scrolling between the "left" div and the "right" div when using the mouse wheel? Currently, if you uncomment the code block, the scrolling behavior changes from scrolling by 100px per scroll to scrolling pi ...

javascripthtmlcss

What's the secret behind the functionality of this jQuery menu?

As I was browsing the website , I noticed that they have a menu in the top header with links like "Freebies" and "Inspiration". I searched for where the code for this menu is located, but couldn't find it. Can anyone help me locate the code? I' ...

jqueryhtmlfirebug

Is there a way to eliminate the table-hover effect on specific rows in the table?

Here is some HTML: <table class="table table-striped table-bordered table-condensed table-hover"> .... </tr> <tr ng-repeat-end ng-show="modelRow.activeRow==car.name" class="hidden-table"> <td colspan="6"> ...

htmlcsstwitter-bootstrap

Filtering content with a sliding effect using CSS and JavaScript

I'm currently developing a jQuery mobile app that requires filtering posts on a specific page. I have already added the posts and designed the filter. Take a look at how it appears below: I am working on animating the filter so that when the user se ...

javascriptjqueryhtmlcssanimation

Here's a step-by-step guide on how to parse JSON information in JavaScript when it's formatted as key-value

I need to parse the JSON data in JavaScript. The data consists of key-value pairs. Data looks like this: {09/02/2014 15:36:25=[33.82, 33.42, 40.83], 08/11/2014 16:25:15=[36.6, 33.42, 40.45], 07/30/2014 08:43:57=[0.0, 0.0, 0.0], 08/12/2014 22:00:52=[77.99 ...

javajavascripthtmljsonarraylist

Steps to create a pop-up displaying a unique message ID retrieved from my database

My goal is to implement a pop-up message dialog on my website. When a user clicks on a reply icon, a pop-up message will appear with a textarea for the user to respond to a question they have been asked. The current issue is that clicking on the tag alway ...

javascriptphphtmljqueryajax

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Has anyone successfully sent data from an HTML select to a PHP file using jQuery? I've tried multiple solutions suggested here, but none seem to be working for me. Below is the code I'm using: <select id="city" name="city" > <optgro ...

javascriptphpjqueryhtmlajax

Styling rounded buttons with GTK and CSS

In my C++ application, I am attempting to create a rounded button by utilizing an external CSS file. Although I have successfully achieved a round button, there is still a pesky rectangular border that remains and I am struggling to figure out how to remo ...

c++cssgtk

Emphasize cells and headers when a cell's value deviates from its initial value

I implemented cell editing in my primeng table. Here is the code: <div class="card"> <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }"> <n ...

htmlcssangularprimengangular10

Using Javascript to delete an HTML list

Currently, I am working on a webpage that includes notifications along with options to mark them as read individually or all at once. However, when attempting to use my loop function to mark all notifications as read, I noticed an issue. let markAllAsRead ...

javascripthtmlfrontend

A step-by-step guide on ensuring mandatory completion of all input fields prior to form submission

I'm new to JavaScript and I need some help. Currently, I am trying to implement input field validation using pure JavaScript for a form. However, I am facing an issue where the "Required" message only appears next to the last name input. What I want ...

javascripthtmlformsdom-events

What is the best way to iterate over each character in a string and trigger a function in JavaScript?

I am currently working on a project to create a random password generator. The code responsible for generating the password is functioning correctly. However, I am facing an issue with converting the characters of the password into phonetic equivalents. I ...

javascripthtmljquery