防止Flexbox溢出

Question

我正在做一系列测验问题，并在每个答案选择中都使用了弹性框。

最终，我希望每一行都带状，但是答案的选择（弹性框）在“带”之外溢出了。

我希望答案选择不包装，所以我不确定如何实现。

我做了一个小提琴： 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

如果您真的不想包装，可以使用@media查询将测验列表类的flex-direction更改为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>&nbsp;</div>
  <div>&nbsp;</div>

  <div id="result_div" style="display:none;">
    <p id="result_text"></p>
  </div>


</form>

Answer 2

我认为这是您的目标？

由于框内的文本，框并没有变得越来越小，因此您需要在flex-wrap:wrap;上添加.quizlist，这样它们才能进入下一行。您还需要添加flex和flex-grow来指定您希望它们灵活使用的宽度。如果您不希望它们增加宽度以匹配屏幕尺寸，请删除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>