Element squeezed when width is narrow

Question

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>

kukkuz · Accepted Answer · 2019-02-14T16:17:27.047

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>

Sorry I just refreshed the screen and got completely different example content. — Bryce Howitson, Feb 14 '19 at 16:18
What I get for trying to answer a question without all the information :) — Bryce Howitson, Feb 14 '19 at 16:28
Some times I love stackoverflow. Thank you @kukkuz! I had no idea about 'flex-shrink'. — burktelefon, Feb 14 '19 at 16:30

Element squeezed when width is narrow

1 Answers1