为什么我的字段集容器在移动视图中溢出，但在更大的屏幕尺寸下却没有？答案

【问题标题】：Why do my field-set containers overflow at mobile-view, but not at larger screen sizes?为什么我的字段集容器在移动视图中溢出，但在更大的屏幕尺寸下却没有？
【发布时间】：2019-05-23 06:00:26
【问题描述】：

我正在使用表单创建一个移动优先的响应式网站。这是我需要在 769px 之后创建的所需模型。 https://ibb.co/LQ0Gwt7。这是 769px 及以下所需的模型：https://ibb.co/7tbDShb 但是为什么在 769px 之前，我的字段集容器的内容溢出了？是什么导致了这种情况发生？为了清楚起见，我在某些元素周围加上了红色边框。看这里：https://ibb.co/1J9n8pW

这是我的 CSS 和 HTML 代码：

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

.form {
  margin: 10px auto;
  width: 70%;
  background: #feffff;
  padding: 30px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
  .zip-input,
  .zip-label {
    flex: 0;
    flex-basis: 25%;
  }
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <header>
    <div class="header-content">
      <h1>The Code Review</h1>
    </div>
  </header>

  <div class="signup">
    <h2>Sign up for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
  </div>

  <form action="index.html" get="post" class="form">

    <fieldset class="field">
      <legend>Contact Information</legend>

      <div class="contact-input">
        <label class="label" for="name">Name</label>
        <input class="input" type="text" id="name" name="user_name">
      </div>

      <div class="contact-input">
        <label class="label" for="mail">Email Address</label>
        <input class="input" type="email" id="mail" name="user_email">
      </div>

      <div class="contact-input">
        <label class="label" for="phone-number">Phone Number</label>
        <input class="input" type="tel" id="phone-number" name="user_phone">
      </div>

      <div class="contact-input">
        <label class="label" for="street">Street Address</label>
        <input class="input" type="text" id="street" name="user_street">
      </div>

      <div class="contact-input">
        <label class="label" for="city">City</label>
        <input class="input" type="text" id="city" name="user_city">
      </div>

      <div class="contact-input">
        <label class="label" for="state">State</label>
        <select class="input" id="state" name="user_state">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>

      <div class="contact-input zip">
        <label class="label zip-label" for="zip">Zip Code</label>
        <input class="input zip-input" type="text" id="zip" name="user_zipcode">
      </div>

    </fieldset>

    <fieldset class="field">
      <legend>Newsletter</legend>

      <p>Select the newspaper you'd like to recieve:</p>

      <div class="news-input">
        <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
        <label for="html-news">HTML News</label>
      </div>

      <div class="news-input">
        <input type="checkbox" id="css-news" name="user_css-news">
        <label for="css-news">CSS News</label>
      </div>

      <div class="news-input">
        <input type="checkbox" id="javascript-news" name="user_javascript-news">
        <label for="javascript-news">Javascript News</label>
      </div>

      <p>Newsletter Format</p>

      <div class="news-input">
        <input type="radio" id="html" name="user_newsletter-format" checked>
        <label for="html">HTML</label>
      </div>

      <div class="news-input">
        <input type="radio" id="css-news" name="user_newsletter-format">
        <label for="css-news">CSS News</label>
      </div>

      <p>Other topics you'd like to hear about</p>
      <div class="textarea">
        <textarea id="topics" name="user_topics"></textarea>
      </div>

    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

【问题讨论】：

标签： html css flexbox fieldset

【解决方案1】：

在小屏幕上你必须设置

.form {
   width: 100%;
}

否则较大的组件会溢出您太小的.form div。

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

.form {
  margin: 10px auto;
  width: 100%; /* SET TO 100% */
  background: #feffff;
  padding: 30px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;
}

@media (min-width: 768px) {

  .form{
    width: 70%;
  }
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
  .zip-input,
  .zip-label {
    flex: 0;
    flex-basis: 25%;
  }
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <header>
    <div class="header-content">
      <h1>The Code Review</h1>
    </div>
  </header>

  <div class="signup">
    <h2>Sign up for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
  </div>

  <form action="index.html" get="post" class="form form_setter">

    <fieldset class="field">
      <legend>Contact Information</legend>

      <div class="contact-input">
        <label class="label" for="name">Name</label>
        <input class="input" type="text" id="name" name="user_name">
      </div>

      <div class="contact-input">
        <label class="label" for="mail">Email Address</label>
        <input class="input" type="email" id="mail" name="user_email">
      </div>

      <div class="contact-input">
        <label class="label" for="phone-number">Phone Number</label>
        <input class="input" type="tel" id="phone-number" name="user_phone">
      </div>

      <div class="contact-input">
        <label class="label" for="street">Street Address</label>
        <input class="input" type="text" id="street" name="user_street">
      </div>

      <div class="contact-input">
        <label class="label" for="city">City</label>
        <input class="input" type="text" id="city" name="user_city">
      </div>

      <div class="contact-input">
        <label class="label" for="state">State</label>
        <select class="input" id="state" name="user_state">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>

      <div class="contact-input zip">
        <label class="label zip-label" for="zip">Zip Code</label>
        <input class="input zip-input" type="text" id="zip" name="user_zipcode">
      </div>

    </fieldset>

    <fieldset class="field">
      <legend>Newsletter</legend>

      <p>Select the newspaper you'd like to recieve:</p>

      <div class="news-input">
        <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
        <label for="html-news">HTML News</label>
      </div>

      <div class="news-input">
        <input type="checkbox" id="css-news" name="user_css-news">
        <label for="css-news">CSS News</label>
      </div>

      <div class="news-input">
        <input type="checkbox" id="javascript-news" name="user_javascript-news">
        <label for="javascript-news">Javascript News</label>
      </div>

      <p>Newsletter Format</p>

      <div class="news-input">
        <input type="radio" id="html" name="user_newsletter-format" checked>
        <label for="html">HTML</label>
      </div>

      <div class="news-input">
        <input type="radio" id="css-news" name="user_newsletter-format">
        <label for="css-news">CSS News</label>
      </div>

      <p>Other topics you'd like to hear about</p>
      <div class="textarea">
        <textarea id="topics" name="user_topics"></textarea>
      </div>

    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

【讨论】：

【解决方案2】：

除非您覆盖它，否则表单输入有一个 default width that the user agent (browser) applies。

size IDL 属性仅限于大于零的非负数，默认值为 20。

表单输入的容器是视口宽度的 70%，一旦视口足够小，70% 就会小于表单输入的默认宽度。因此溢出。

在较大的视口尺寸下，您正在使用 flexbox 属性，这会导致输入拉伸其包含元素的特定宽度。

将width: 100%; 应用于您的表单输入。

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

【讨论】：

【解决方案3】：

这将是您最好的方法，无需媒体查询：

.form {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1024px; //insert your prefer value here;
}

【讨论】：

@hungerstar 你试过我的解决方案了吗？操作员的问题很明确，但他的麻烦来自form CSS 选择器，而不是字段。他将表格设置为 70%，但忘记在移动设备中将此值重置为 100%，难怪会导致溢出问题。我的解决方案是一种快速且适用于所有浏览器设备宽度的解决方案，并且会被认为更先进。
它仍然会溢出，只是不像以前那样快了。问题围绕用户代理（浏览器）为input 定义的默认大小。此外，像form 这样的块级元素不需要width: 100% 或display: block（除非您由于媒体查询/其他原因而重置它们），因为这是它们的默认设置。在左右边距添加max-width 和auto 是块元素居中的一种模式。
我还在想你有没有检查过他的设计意图？显然，在桌面上，他希望表格居中，而不是 100%。我知道在块级元素上不需要display: block 和width: 100%，但我仍然相信这对像他这样的人会有帮助。这只是帮助他更多地了解 CSS，而不仅仅是一些神奇的东西。如果您只是设置width:100% 而不使用 max-width 或将其放入移动媒体查询中，您的解决方案将无法按预期工作。
我已经看过所有的截图并理解 OP 的意图。块元素及其默认格式（布局实现）不是“一些神奇的东西。”它是成为一名称职的 Web 开发人员的基础。展示不必要的 CSS 属性会阻碍初学者理解基本概念的能力，因为他们会认为这些东西是必要的，而实际上并非如此。至于width: 100%，我指的是表单元素，即inputs、select等以及表单元素的容器元素。