css - 如何使输入元素符合网格容器的尺寸？

Question

我在 CSS 网格容器中有一个 input 元素。容器应为 100 像素宽，input 元素占据大部分空间，other-thing 元素占据剩余的 24px。为此，我正在使用 grid-template-columns。

如果我将父容器设置为 200px 而不是 100px，这就可以正常工作:

.container {
  grid-template-columns: 1fr 24px;
  grid-template-rows: 1fr;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 200px; /* Try 100px */
  background-color: red;
}

和下面的 HTML

<div class="container">
  <input value="hello"/>
  <div class="other-thing">
    x
  </div>
</div>

但是如果我将容器设为 100px 宽，输入会突然拒绝收缩 - 因此它会与红色容器重叠。

I know input elements have a user stylesheet, but I can't see anything related to width or display there that I should be overriding.

Here is a jsfiddle

如何让 input 只使用容器中的剩余空间，最好使用 grid-template-columns？

Answer 1

从视觉 Angular 来看，主要问题是justify-content: center。

因为您的容器设置为 width: 100px，所以网格项将在该空间内水平居中，并在容器的两侧均等地溢出。这会导致左侧从屏幕上消失，并且变得完全无法访问(即使通过滚动)。

(有关此行为的完整解释，请参阅:Can't scroll to top of flex item that is overflowing container)

当您切换到 width: 200px 时，容器会获得足够的空间来容纳网格项，因此不会发生溢出。

解决此问题的最快和最简单的方法是删除 justify-content: center。无论如何这是没有意义的，因为容器比内容小，如果容器中没有可用空间，您就无法将内容居中。所以 justify-content 没有做任何事情。

如果您希望所有网格项都适合容器，则将 min-width: 0 添加到 input 元素。这允许 input 缩小到其内容的大小及其 min-width: auto 默认值以下。

(有关此行为的完整解释，请参阅:Prevent content from expanding grid items)

.container {
  grid-template-columns: 1fr 24px;
  display: grid;
  width: 100px;
  border: 2px dashed red;
}

input {
  min-width: 0;
}

<div class="container">
  <input value="hello" />
  <div class="other-thing">x</div>
</div>

请注意，input 元素的默认宽度和最小宽度过去很容易通过 Chrome/Firefox 检查器工具查看。这似乎不再是这种情况。我找不到用户代理样式中的设置。我们必须查看计算值以获取指导，或者假设存在宽度和最小宽度设置。