CSS 网格内奇怪的不需要的溢出

Question

我正在尝试制作一个网格，其中图像输入字段是一个长宽比为 1:1 的大正方形。我需要字段高度与网格中的其他输入字段对齐。所以第二个网格项目应该有 100% 的高度。我在 Figma 中画了一个我想要做的事情的草图。

注意： 我无法使用

aspect-ratio

属性，因为它还没有足够的支持来满足我的需求。我还想避免使用幻数和 JavaScript。

我尝试过的：目前，我正在使用

width: 0;

+

padding: 0 100%;

技巧来获得 1:1 的宽高比。然而，图像输入并没有像我想要的那样将其他网格项推回原处，而是溢出了。这对我来说很奇怪，因为第二个网格项应该具有自动宽度。此外，输入的宽高比似乎也不是 1:1。如有任何帮助，我们将不胜感激

section {
  margin: 2rem;
  padding: 2rem;
  background: #eee;
}
.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.form-item ~ .form-item {
  margin-top: 2rem;
}


.image_input_container {
  position: relative;
  height: 100%;
  width: 0;
  padding: 0 100%;
}
.image_input {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: white;
}

<section>
  <div class="grid">
    <div>
      <div class="form-item">
        <label>Name</label>
        <input>
      </div>
      <div class="form-item">
        <label>Description</label>
        <input>
      </div>
    </div>
    <div class="form-item">
      <label>Image</label>
      <div class="image_input_container">
        <button class="image_input">+</button>
      </div>
    </div>
  </div>
</section>

Answer 1

section {
  margin: 2rem;
  padding: 2rem;
  background: #eee;
}

.grid {
  display: grid;
  grid-template-columns: 7fr minmax(auto, 1fr);
  gap: 2rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-item~.form-item {
  margin-top: 2rem;
}

.image_input_container {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.image_input {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: white;
}

<section>
  <div class="grid">
    <div>
      <div class="form-item">
        <label>Name</label>
        <input>
      </div>
      <div class="form-item">
        <label>Description</label>
        <input>
      </div>
    </div>
    <div class="form-item">
      <label>Image</label>
      <div class="image_input_container">
        <button class="image_input">+</button>
      </div>
    </div>
  </div>
</section>

也许您可以使用 minmax 来定义列，并使用 padding-top:100% 来保持纵横比。查看示例代码，希望有帮助。