CSS 网格：网格间隙导致项目溢出？

Question

我的表单布局有点问题，如果有人能提供一点帮助的话：我的理解是，如果我有一个固定宽度的容器，使用 fr 而不是 [= 的百分比宽度14=] 将仅考虑可用的免费 space，因此 grid-gap 不会导致网格溢出其容器，如 :

中所述

As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.

还有:

The fr unit works only with the free space in the container.

但我的代码似乎仍然导致网格溢出（我只关心水平方向）：

https://codepen.io/nwoodward/pen/bGLpBbP

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  width: 100%;
}

<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

我想问题的一部分是输入元素具有某种固定的最小宽度，但即使这是真的，固定 .field 或 [=17= 的宽度] 到适合的较小值根本不是我真正想要的。

*编辑：输入溢出

**编辑：没有溢出 div

Answer 1

这个问题是因为你给了 parent 一个固定的高度：
.container { height: 100vh; }

要解决它，只需将属性从 height 更改为 min-height。然后容器将增长而不是让内容溢出：

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  width: 100%;
}

<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

Answer 2

更新如下代码（相关问题理解第一个代码调整：）

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* here */
  grid-gap: 4rem;
}

/* here */
input {
  max-width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

CSS 网格：网格间隙导致项目溢出？

CSS Grid: Grid-gap causing items to overflow?

html

css

css-grid