CSS flex gap not working on input forms - how make gap and padding work?

Question

I have the following code (jsfiddle):

.container {
  width: 450px;
  max-width: 450px;
  background-color: #dbe7ff;
  display: block;
  padding: 33px 32px;
}

.name-last-name {
  display: flex;
  justify-content: space-between;
  grid-gap: 16px;
  gap: 16px;
}

.form-group {
  margin-bottom: 10px;
  width: 100%;
}

.form-group label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 12px;
  color: #63769C !important;
  margin-left: 15px;
}

.form-group input {
  background: #F7F8FA !important;
  color: #2B3654;
  border-radius: 8px !important;
  border: none;
  padding-left: 16px;
  font-size: 14px;
  width: 100%;
}

<div class="container">

  <div class="name-last-name">
    <div class="form-group">
      <label for="input-field">First Name</label><input autocomplete="false" name="firstName" class="form-control" placeholder="First Name" value="naaame" />
    </div>
    <div class="form-group">
      <label for="input-field">Last Name</label><input autocomplete="false" name="lastName" class="form-control" placeholder="Last Name" value="lastnamee" />
    </div>
  </div>
</div>

As you can see there are 2 problems:

the input last name is covering the padding of the container. It should be large until the padding starts, but not go over it.
The gap between the two fields is not being applied. I'd like to be able to use the gap I want, for example 16px ... 20px. I can manage a similar effect if I give 90% width to the flex children... but that's not the way to go.

I have also checked this question: How to make an element width: 100% minus padding?

However that questions only gives a solution. The solution of that question fits my solution. However the question is different and the problem is different. In this case the problem is the gap not working because of box-sizing. That other question only treats part of this. The solution is the same, but the problem is different.

Can anyone please help to fix those two issues with css?

If you inspect the code your flex gap is working... – Shane Muirhead Dec 13 '22 at 11:53 — Shane Muirhead, Dec 13 '22 at 11:53

score 1 · Accepted Answer · answered Dec 13 '22 at 11:55

It's just a box-sizing issue. Modify your code as follows:

.container {
  width: 450px;
  max-width: 450px;
  background-color: #dbe7ff;
  display: block;
  padding: 33px 32px;
  
  /* added this */
  box-sizing:border-box;
}

/* added this */
.container * {
  box-sizing:border-box;
}

.name-last-name {
  display: flex;
  justify-content: space-between;
  grid-gap: 16px;
  gap: 16px;
}

.form-group {
  margin-bottom: 10px;
  width: 100%;
}

.form-group label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 12px;
  color: #63769C !important;
  margin-left: 15px;
}

.form-group input {
  background: #F7F8FA !important;
  color: #2B3654;
  border-radius: 8px !important;
  border: none;
  padding-left: 16px;
  font-size: 14px;
  width: 100%;
}

<div class="container">

  <div class="name-last-name">
    <div class="form-group">
      <label for="input-field">First Name</label><input autocomplete="false" name="firstName" class="form-control" placeholder="First Name" value="naaame" />
    </div>
    <div class="form-group">
      <label for="input-field">Last Name</label><input autocomplete="false" name="lastName" class="form-control" placeholder="Last Name" value="lastnamee" />
    </div>
  </div>
</div>

CSS flex gap not working on input forms - how make gap and padding work?

1 Answers1