如何防止输入元素超过 CSS 网格列的宽度

Question

我想使用CSS网格来管理多个表单的布局。目标是使用两列网格，其中标签元素位于左列，输入元素位于右列。左列的宽度需要调整大小以适合最宽的标签，右列应占据 space 的剩余部分。这是我正在使用的网格列模板：

grid-template-columns: max-content 1fr;

我面临的问题是输入元素经常会超过右列的宽度。不幸的是，在输入元素上将 max-width 设置为 100% 不会将其大小限制为列宽。如果我将 width 设置为 100%，那确实会限制大小，但随着响应式表单变宽，从设计角度来看，输入的 100% 宽度太宽了。

这是标记：

<body>
<div class="container">
  <label>This is label 1</label>
  <input type="text" maxlength="100">
  <label>This is label 2</label>
  <input type="text" maxlength="100">
  <label>This is label 3 which is a bit longer</label>
  <input type="text" maxlength="100">
  <label>This is label 4</label>
  <input type="text" maxlength="100">
</div>
</body>

这是CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  width: 300px;
/*   width: 1300px; */
  margin: 2rem auto;
  background-color:lightblue;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  grid-column-gap: 24px;
  grid-row-gap:8px;
}

input {
  padding: .5rem .5rem;
  max-width:100%;
/*   width: 12rem; */
  justify-self: end;
}

这是一个CodePen。

问：如何将输入的宽度限制在 200 像素左右并保持正确刷新？同时，随着表格越来越窄，它不能超过网格列的宽度。

Answer 1

.container input {min-width: 0;}

如何防止输入元素超过 CSS 网格列的宽度

How to prevent Input element from exceeding width of CSS grid column

forms

css-grid