Element squeezed when width is narrow [duplicate] - html

Question

This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I've been asked to fix a problem that I don't understand. Can someone be kind enough to have a look at this fiddle?
When shrinking the width of the output pane so that the last question is forced to multi line, the accompanied span .checkmark is no longer round but elliptical.
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>

Answer 1

That's because when the content is more that the space available, by default the flexbox items tries to shrink to the space available - add flex-shrink: 0 to checkmark - see demo below-
body {
background-color: white;
color: black;
font-weight: 400;
font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
margin: 0px;
}
.header-container {
padding: 1px;
text-align: left;
color: white;
}
.header-txt {
font-size: 15px;
margin: 5px 11px 4px 11px;
display: inline-block;
}
/* Format Question text */
.question-container {
flex: 1 1 auto;
margin: auto;
display: flex;
padding-bottom: 5px;
}
.question-text {
font-size: 17px;
font-weight: 600;
line-height: 22px;
text-align: left;
margin-bottom: 3px;
font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}
/* Format pages */
.question-page {
font-size: 12px;
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
}
/* Question options format */
.option-container {
display: flex;
position: relative;
padding-left: 0px;
margin-bottom: 0px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.option-container input {
position: absolute;
opacity: 0;
}
.checkmark {
flex-shrink: 0; /* ADDED */
position: relative;
height: 15px;
width: 15px;
background-color: #D3D3D3;
border-radius: 50%;
margin-top: auto;
margin-bottom: auto;
margin-right: 15px;
}
.option-container:hover input~.checkmark {
background-color: #A9A9A9;
}
.option-container:hover {
background-color: #F8F8F8;
}
.option-container input:checked~.checkmark {
background-color: #dd2a30;
}
<div id="survey">
<div class="header-container">
<span class="header-txt">A question for you...</span>
</div>
<div id="question-body" class="modal-body">
<div id="q1" class="question-page">
<div class="question-container">
<span class="question-text">What is your relationship <br> with [brand]?</span>
</div>
<div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
<input class="question-option" type="radio" name="q1" value="1">
</div>
<div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
<input class="question-option" type="radio" name="q1" value="2">
</div>
<div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
<input class="question-option" type="radio" name="q1" value="3">
</div>
<div class="option-container"><span class="checkmark"></span>My most preferred [product category]
<input class="question-option" type="radio" name="q1" value="4">
</div>
<div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
<input class="question-option" type="radio" name="q1" value="5">
</div>
</div>
</div>
</div>