Flexbox and making inputs fill available space

Working on a Scion 2E sheet and its been a minute since I've done a character sheet from the ground up. Struggling with getting inputs to fill the space between the label and skill dots.  There's a bunch of width defaults coming from roll20's css class so I have these currently on width: 35% (because width:auto  starts shoving off the skill dots from longer labels). This is what I have in the css: .sheet-radio-path { order: 1; } .sheet-radio-skill { height: .8em; order: 2; padding: 0px; } .sheet-input-skill { order: 3; min-width: 0px; width: 35%; flex: 1 1 auto; line-height: .8em; } .sheet-dotcontainer { display: inline-block; float: right; width: 90px; order: 4; } The html lives in a container in this class: .sheet-col { width: 48%; display: flex; flex-direction: row; flex: 1 auto; }

To get them to scale to fill the available space, you'll need to use either flexbox or CSS Grid . If you can share the html for the section in the picture, I can demo how to do it. Flexbox is probably your best bet in this situation. And, I just realized you already want to use flex. To explain how to handle this, I'll need to see the html for the section.

This is the start of the thing.  div class="flexcontainer"> <div class="col"> <div> <input type="checkbox" class="radio-path" name="attr_roll-Skill"><span></span> <label class="radio-skill inline" data-il8n="Academics" name="attr_path-Academics">Academics</label> <input type="text" class="input input-skill"> <div class="inline dotcontainer"> <input type="radio" class="radio-dots invisible" name="attr_Academics" value="0" checked="checked"><span></span> <input type="radio" class="radio-dots" name="attr_Academics" value="1"><span></span> <input type="radio" class="radio-dots" name="attr_Academics" value="2"><span></span> <input type="radio" class="radio-dots" name="attr_Academics" value="3"><span></span> <input type="radio" class="radio-dots" name="attr_Academics" value="4"><span></span> <input type="radio" class="radio-dots" name="attr_Academics" value="5"><span></span> </div> </div>

Ugh, I just realized I have the row in a blank div, I imagine the flex container affects direct-children as flex containers? 

Slapping a display:flex  on the divs was not the answer 

Heres the css if you wanna mess with what I have <a href="https://pastebin.com/FygWNEJP" rel="nofollow">https://pastebin.com/FygWNEJP</a>

Figured it out! I just needed to width:auto &nbsp;the label... for reasons.&nbsp; Next question, why are my bullets offset and how do I fix that?&nbsp;

I figured everything out, I'm a good boy

Richard T. said: Next question, why are my bullets offset and how do I fix that?&nbsp; When I want a bubble just filled (and not have a special symbol like you have) I set the content to " " and have the background to a solid color.&nbsp;&nbsp;