Prevent input from overflow grid parent

Question

Consider the following snippet:

#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 275px;
  border: 2px solid green;
  padding: 10px;
}
input {
  background-color: hotpink;
}

<div id="parent">
  <input />
  <input />
  <input />
  <input />
</div>

If you run the snippet, you will find that the inputs overflow the parent div along the x-axis and refuses to fit inside the div (tested in Chromium-based Edge). Basically, when you give the parent with display: grid a fixed width, the input children don't seem to fit.

I've tried all the properties I could think of, but none of them seemed to keep the inputs where they belong (I expect a nice 2x2 grid where the children fit evenly into the grid). How can I keep the inputs in the grid?

By simply adding `width: 100%` to `input`. To top if off, add `* { box-sizing: border-box }` for some weighted space distribution. — Rene van der Lende, Dec 03 '22 at 03:07
@RenevanderLende ah, it works. I actually tried that but forgot that I had a span directly wrapping the input. — code, Dec 03 '22 at 03:13

score 0 · Answer 1 · answered Dec 03 '22 at 03:12

You could use a percentage of the overall parents width in your grid template column for the parents css. Being you have two items, you can divide 100% by the amount of items and use that percentage grid-template-columns: repeat(2, 50%);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#parent {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 1fr);
  width: 275px;
  border: 2px solid green;
  padding: 10px;
}

input {
  background-color: hotpink;
}

<div id="parent">
  <input />
  <input />
  <input />
  <input />
</div>

score 0 · Answer 2 · answered Dec 03 '22 at 03:13

0

The input width is depends on its size if there is no other width style on it, and the default of size is 20.

MDN Link

answered Dec 03 '22 at 03:13

lv_

198
1
8

Prevent input from overflow grid parent

2 Answers2