Prevent flexbox overflow - css

Question

I'm making a series of quiz questions and am utilizing flexboxes for each answer choice.
Ultimately, I'd like each row banded, but the answer choices (the flexboxes) are overflowing outside of the "band."
I want the answer choices to not wrap, so I'm not sure how to accomplish this.
I made a fiddle:
https://jsfiddle.net/4L8e2s9r/1/
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.quizlabel {
border: 2px solid #0052e7;
transition: .1s;
background-color: #0052e7;
box-shadow: 2px 2px 3px #c8c8c8;
color: #fff;
}
input[type="radio"]:hover+.quizlabel {
border: 2px solid #0052e7;
}
.quizlabel {
padding: 5px;
margin: 5px;
border: 2px solid #484848;
color: #000;
font-family: sans-serif;
font-size: 14px;
}
.quizform>div {
padding: 10px;
margin-top: 10px;
}
.quizlabel:first-of-type {
margin-left: 0;
}
.quizform {
padding: 10px;
font-family: sans-serif;
}
.quizform p {
margin: 2px;
font-weight: Bold;
}
.quizrow:nth-of-type(odd) {
background-color: #e2e3e5;
}
.quizlist {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
margin: 0 padding: 0;
}
#result_div {
font-family: sans-serif;
color: #000;
border: 3px solid #000;
padding: 10px;
}
#result_div p {
color: #000;
}
.quiz-submit {
font-family: sans-serif;
color: #fff;
background-color: #000;
padding: 10px;
cursor: pointer;
}
.quiz-submit:hover {
background-color: #0052e7;
}
<form name="quizform" class="quizform">
<div class="quizrow">
<p>Q1</p>
<div class="quizlist">
<input type="radio" name="q1" value="1" id="q1-1"><label for="q1-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q1" value="2" id="q1-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q1" value="3" id="q1-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q1" value="4" id="q1-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q1" value="5" id="q1-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<div class="quizrow">
<p>Q2</p>
<div class="quizlist">
<input type="radio" name="q2" value="1" id="q2-1"><label for="q-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q2" value="2" id="q2-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q2" value="3" id="q2-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q2" value="4" id="q2-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q2" value="5" id="q2-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<p></p>
<button type="submit" class="quiz-submit">Submit</button>
</form>

Answer 1

If you really don't want to wrap you can use #media queries to change flex-direction of your quizlist class to column.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.quizlabel {
border: 2px solid #0052e7;
transition: .1s;
background-color: #0052e7;
box-shadow: 2px 2px 3px #c8c8c8;
color: #fff;
}
input[type="radio"]:hover+.quizlabel {
border: 2px solid #0052e7;
}
.quizlabel {
padding: 5px;
margin: 5px;
border: 2px solid #484848;
color: #000;
font-family: sans-serif;
font-size: 14px;
}
.quizform>div {
padding: 10px;
margin-top: 10px;
}
.quizlabel:first-of-type {
margin-left: 0;
}
.quizform {
padding: 10px;
font-family: sans-serif;
}
.quizform p {
margin: 2px;
font-weight: Bold;
}
.quizrow:nth-of-type(odd) {
background-color: #e2e3e5;
}
.quizlist {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
margin: 0 padding: 0;
}
#media (max-width: 500px){
.quizlist {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
}
#result_div {
font-family: sans-serif;
color: #000;
border: 3px solid #000;
padding: 10px;
}
#result_div p {
color: #000;
}
.quiz-submit {
font-family: sans-serif;
color: #fff;
background-color: #000;
padding: 10px;
cursor: pointer;
}
.quiz-submit:hover {
background-color: #0052e7;
}
<form name="quizform" class="quizform">
<div class="quizrow">
<p>Q1</p>
<div class="quizlist">
<input type="radio" name="q1" value="1" id="q1-1"><label for="q1-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q1" value="2" id="q1-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q1" value="3" id="q1-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q1" value="4" id="q1-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q1" value="5" id="q1-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<div class="quizrow">
<p>Q2</p>
<div class="quizlist">
<input type="radio" name="q2" value="1" id="q2-1"><label for="q-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q2" value="2" id="q2-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q2" value="3" id="q2-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q2" value="4" id="q2-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q2" value="5" id="q2-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<p></p>
<button type="submit" class="quiz-submit">Submit</button>
<div> </div>
<div> </div>
<div id="result_div" style="display:none;">
<p id="result_text"></p>
</div>
</form>

Answer 2

I think this is what you're aiming for?
The boxes weren't getting smaller because of the text inside of them, so you needed to add flex-wrap:wrap; to the .quizlist so that way they would go onto the next row. You also needed to add a flex and flex-grow to specify the widths you want them to flex to. If you don't want them to increase widths to match that of the screen size, then remove the flex-grow.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.quizlabel {
border: 2px solid #0052e7;
transition: .1s;
background-color: #0052e7;
box-shadow: 2px 2px 3px #c8c8c8;
color: #fff;
}
input[type="radio"]:hover+.quizlabel {
border: 2px solid #0052e7;
}
.quizlabel {
padding: 5px;
margin: 5px;
border: 2px solid #484848;
color: #000;
font-family: sans-serif;
font-size: 14px;
flex: 0 0 5%;
flex-grow: 1;
}
.quizform>div {
padding: 10px;
margin-top: 10px;
}
.quizlabel:first-of-type {
margin-left: 0;
}
.quizform {
padding: 10px;
font-family: sans-serif;
}
.quizform p {
margin: 2px;
font-weight: Bold;
}
.quizrow:nth-of-type(odd) {
background-color: #e2e3e5;
}
.quizlist {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
#result_div {
font-family: sans-serif;
color: #000;
border: 3px solid #000;
padding: 10px;
}
#result_div p {
color: #000;
}
.quiz-submit {
font-family: sans-serif;
color: #fff;
background-color: #000;
padding: 10px;
cursor: pointer;
}
.quiz-submit:hover {
background-color: #0052e7;
}
<form name="quizform" class="quizform">
<div class="quizrow">
<p>Q1</p>
<div class="quizlist">
<input type="radio" name="q1" value="1" id="q1-1"><label for="q1-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q1" value="2" id="q1-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q1" value="3" id="q1-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q1" value="4" id="q1-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q1" value="5" id="q1-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<div class="quizrow">
<p>Q2</p>
<div class="quizlist">
<input type="radio" name="q2" value="1" id="q2-1"><label for="q-1" class="quizlabel"><span>Strongly Disagree</span></label>
<input type="radio" name="q2" value="2" id="q2-2"><label for="q1-2" class="quizlabel"><span>Disagree</span></label>
<input type="radio" name="q2" value="3" id="q2-3"><label for="q1-3" class="quizlabel">Neutral</label>
<input type="radio" name="q2" value="4" id="q2-4"><label for="q1-4" class="quizlabel">Agree</label>
<input type="radio" name="q2" value="5" id="q2-5"><label for="q1-5" class="quizlabel">Strongly Agree</label>
</div>
</div>
<p></p>
<button type="submit" class="quiz-submit">Submit</button>
</form>