html - 宽度窄时元素被挤压

Question

<分区>

Answer 1

这是因为当内容超过可用空间时，默认情况下 flexbox 元素会尝试收缩到可用空间 - 添加 flex-shrink: 0 到 checkmark - 请参阅下面的演示 -

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>