Question

我在CSS网格容器内有一个input元素。容器的宽度应为100像素，其中other-thing元素将占据大部分空间，而grid-template-columns则将占据剩余的24px。我为此使用.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; }。

如果我将父容器设置为200px而不是100px，则效果很好：

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

以及以下HTML

input

但是，如果我将容器的宽度设置为100像素，则输入内容会突然拒绝缩小-因此它与红色容器重叠。

我知道input元素有一个用户样式表，但是我看不到任何与宽度有关的内容，也没有显示应该覆盖的内容。

Here is a jsfiddle

如何使grid-template-columns仅使用容器中的剩余空间，最好使用import android.content.Context; import android.support.annotation.NonNull; import android.util.Log; import androidx.work.ListenableWorker; import androidx.work.WorkerParameters; import javax.inject.Inject; import javax.inject.Provider; import com.sampleapp.model.Model; public class SimpleWorker extends androidx.work.Worker { //dagger (what we want to Inject into worker) U CAN ADD WHATEVER NEEDED private Model model; //not dagger (just some fields) private String someField; private final String TAG = getClass().getSimpleName(); private SimpleWorker(@NonNull Context context, @NonNull WorkerParameters workerParams, Model model) { super(context, workerParams); this.model = model; someField = "just some work"; } @NonNull @Override public ListenableWorker.Result doWork() { Log.d(TAG, "Worker starts"); Log.d(TAG, model.getClass().getSimpleName() + " doing some work"); Log.d(TAG, "Job done!"); return ListenableWorker.Result.success(); } public static class Factory implements ChildWorkerFactory { private final Provider<Model> modelProvider; @Inject public Factory(Provider<Model> modelProvider) { this.modelProvider = modelProvider; } @Override public ListenableWorker create(Context context, WorkerParameters workerParameters) { return new SimpleWorker(context, workerParameters, modelProvider.get()); } } }？

Answer 1

.container {
  display: grid;
  grid-template-columns: 1fr 24px;
  width: 100px;
  background-color: red;
}

input {
  min-width: 0;
}

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

Answer 2

从视觉上看，主要问题是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检查器工具看到。情况似乎不再如此。我找不到用户代理样式中的设置。我们必须查看计算值以作为指导，或者仅假设存在宽度和最小宽度设置。

如何使输入元素尊重网格容器的尺寸？

2 个答案: