Div inside a table-cell overflows the cell vertically

Question

First, keep in mind I'm somewhat new to front end.

I'm styling an ASP.NET Core MVC app, more specifically an input form. I have a table and inside each table cell I have a div, which contains a label, an input field and possibly an error message. The issue is (as you can see below) that on some screen widths the div and all its content overflow the table cell td from below.

The first input area has to include a label and next to it a narrow input field, which is achieved by the .short class. The other fields are styled as follows (from the top downwards): label, input field, error message. The input field should take the entire div width (excluding its padding, of course) and be positioned at the bottom of its parent div. After playing around with the display:flex property, I found out the following combination of properties works for me:

display: flex;
align-items: flex-end;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: flex-start;

The issue of overflowing is fixed if I remove the display:flex property, however, the styling doesn't fit my requirements and all div-s have different heights. I checked other posts on the forum, addressing combination of a div and a table-cell, such as this one, but they combine the div and the table in different ways than mine. This question might be somewhat relevant, but i cannot see how.

Here's a JSFiddle, displaying what's going on. The issue occurs when the width of the preview box is less than 380px (at least on my screen). The full app, opened in the browser, displays wrongly even if the screen is a lot wider (760px). Or, instead, you can see the full CSS and HTML below:

body {
  font-family: Verdana;
}

label {
  white-space: normal;
  text-shadow: 0 0 1px #303030;
}

td {
  padding: 0 !important;
  margin: 6px 0;
}

#border-none {
  border-top: none !important;
}

#border-mid {
  border: none;
  border: 2px 0 groove rgba(180, 180, 180, 0.8);
}


/* Styling the table itself */

.table-style {
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 7px 0px #a0a0a0;
  margin-bottom: 0;
  font-size: 20px;
}

.table-my {
  margin-bottom: 0 !important;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}


/* Styling of the div in each cell */

.group-my {
  box-shadow: 0 0 5px 0 black;
  background-color: rgba(220, 220, 220, 0.3);
  border-radius: 22px;
  padding: 8px;
  margin: 8px;
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
}


/* Styling the input fields */

.input-active {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0 5px 2px #606060;
  width: 100%;
}

.input-active:focus {
  box-shadow: inset 0 0 5px 2px red;
}

.input-inactive {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 0 5px 2px #606060;
  width: 100%;
}

.short {
  margin-left: 1rem;
  max-width: 100px;
}


/* Styling the Confirm button */

.btn-align {
  display: flex;
  justify-content: center;
}

.btn-save {
  width: 200px;
  height: 50px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #f0f0f0;
  background-color: #ff3030;
  border: 2px solid #cc0000;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.btn-save:hover {
  color: #f0f0f0;
  background-color: #ff6060;
  border-color: #cc0000;
  transition: background-color 0.3s cubic-bezier(0.21, 0.54, 0.5, 1);
}

.btn-save:active {
  color: #f0f0f0 !important;
  background-color: #ff6060 !important;
  border-color: #cc0000 !important;
}

<h2>Check</h2>
<hr />
<div>
  <div>
    <form asp-action="Create">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
      <div class="table-style">
        <table class="table table-my">
          <tbody>
            <tr>
              <td id="border-none" colspan="2">
                <div class="form-group group-my">
                  <label asp-for="EmployeeCode" class="control-label">Employee code</label>
                  <input asp-for="EmployeeCode" class="form-control input-active short" />
                  <span asp-validation-for="EmployeeCode" class="text-danger"></span>
                </div>
              </td>
            </tr>
            <tr>
              <td id="border-mid">
                <div class="form-group group-my">
                  <label asp-for="ProductCode" class="control-label">Product code</label>
                  <input asp-for="ProductCode" id="code" class="form-control input-active" placeholder="" />
                  <span asp-validation-for="ProductCode" class="text-danger"></span>
                </div>
              </td>
              <td id="border-mid">
                <div class="form-group group-my">
                  <label asp-for="Description" class="control-label">Description</label>
                  <input asp-for="Description" id="materialCode" class="form-control disabled input-inactive" disabled placeholder="" />
                  <span asp-validation-for="Description" class="text-danger"></span>
                </div>
              </td>
            </tr>
            <tr>
              <td id="border-none">
                <div class="form-group group-my">
                  <label asp-for="Order" class="control-label">Order</label>
                  <input asp-for="Order" class="form-control input-active" />
                  <span asp-validation-for="Order" class="text-danger"></span>
                </div>
              </td>
              <td id="border-none">
                <div class="form-group group-my">
                  <label asp-for="Quantity" class="control-label">Quantity</label>
                  <input asp-for="Quantity" class="form-control input-active" min="0" />
                  <span asp-validation-for="Quantity" class="text-danger"></span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="btn-align">
        <input type="submit" value="Confirm" asp-action="Create" class="btn btn-primary btn-save" />
      </div>

    </form>
  </div>
</div>

Any help will be greatly appreciated. If you need any further clarifications, I'm usually responding in 1-2 hours. Thanks in advance.

Edit: Thanks to Gerard for fine-tuning my code. Also, I attached a screenshot below so you can see what it looks like on my screen.

Are you sure input overflows?on myside,the input/label overflows,not the input — Ruikai Feng, Jul 21 '23 at 09:32
As I stated above, the input field doesn't overflow. What overflows, is the div itself with its border and background. I will add a screenshot. — Veselin Dimov, Jul 21 '23 at 10:21
I see what you mean, I guess with the online Run of the code it is visuallized differently. What I get in Chrome is pretty much what I shared on JSFiddle. — Veselin Dimov, Jul 21 '23 at 10:28

score 2 · Accepted Answer · answered Jul 21 '23 at 10:17

Why not use form tag without using the table tag ? Take a look at this code.

body {
  margin: 0;
  padding: 0;
}

main {
    margin:2em;
}

.form-example {
  display: flex;
  gap: 2em;
}

.item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.5em 0;
  gap: 0.5em;
}

input {
  padding: 1em;
  border-radius: 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.7);
}

button {
  border-radius: .5em;
  align-self: start;
  margin-top: 2em;
  cursor: pointer;
  padding: 1em;
  border: none;
  color: #fff;
  background-color: red;
}

@media screen and (max-width: 425px) {
    .form-example {
        display: block;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <main>
        <h1>Check</h1>
        <form action="#" method="#">
            <div class="form-example">
                <div class="item">
                    <label for="">Employee code :</label>
                    <input type="text">
                </div>
            </div>
            <div class="form-example">
                <div class="item">
                    <label for="">Product code :</label>
                    <input type="text">
                </div>
                <div class="item">
                    <label for="">Description :</label>
                    <input type="text">
                </div>
            </div>
            <div class="form-example">
                <div class="item">
                    <label for="">Order code :</label>
                    <input type="text">
                </div>
                <div class="item">
                    <label for="">Quantity :</label>
                    <input type="text">
                </div>
            </div>
            <button type="submit">Confirm</button>
        </form>
    </main>
</body>
</html>

This worked for me - did exactly what it needed to and the div's height is changed adequately. Apparently I had over-complicated my page with the table. Will keep this in mind in future projects. — Veselin Dimov, Jul 21 '23 at 10:55
But I guess table is the way to go whenever I need to have one div span over multiple "cells" compared to other rows or columns. Such as merging cells in Excel. — Veselin Dimov, Jul 21 '23 at 10:58

Div inside a table-cell overflows the cell vertically

1 Answers1