How do I get the width of a rotating radio button to work inside of a flex box? Is there a way to use grids to do this? So I have a rotating radio button (which used to be on the wiki but I can't find it). It looks like in html: <div class="sheet-Shield">
<input type='radio' class="sheet-Shield sheet-nShield" name="attr_runeshot-Accuracy" value="1" />
<input type='radio' class="sheet-Shield sheet-yShield" name="attr_runeshot-Accuracy" value="0" checked />
<span class="sheet-Shield sheet-nShield">Accuracy</span>
<span class="sheet-Shield sheet-yShield strike">Accuracy</span>
</div> And in the css: div.sheet-Shield {
position: relative;
width: 100%;
height: 20px;
left:0px;
top:0px;
margin:0px;
}
input.sheet-Shield {
width: 100%;
height: 20px;
position: absolute;
left:0px;
top:0px;
z-index: 1;
opacity: 0;
}
span.sheet-Shield {
margin: 10px 0 0 40px;
display: none;
position: absolute;
left:-40px;
top:-10px;
width:50px;
text-align:center;
font-weight:bold;
font-variant: small-caps;
}
span.sheet-Shield.sheet-red {
color:red;
}
span.sheet-Shield.sheet-strike {
text-decoration: line-through;
}
input.sheet-nShield {
z-index: 2;
}
input.sheet-nShield:checked + input.sheet-yShield,
input.sheet-yShield:checked + input.sheet-nShield {
z-index: 3;
}
input.sheet-nShield:checked ~ span.sheet-nShield,
input.sheet-yShield:checked ~ span.sheet-yShield {
display: inline-block;
} I want the rotating buttons to stretch out like a flex box with a row wrap, hop to the next line when they run out of space, and not have to hard code in some kind of individual width for each item.
