Cannot reduce div height without having visualization issues

Question

in this codepen:https://codepen.io/anon/pen/GGrVdK

I cannot reduce the height of the div having class foul-row to 4px height, given that every foul div is 4px tall.

   .foul{
      background: linear-gradient(to bottom right, rgb(0,0,0), rgb(92,92,92));
      height: 4px;
      margin-top:0;
      margin-bottom: 0;
      margin-right: 2px;
      width: 15px;
      display: inline-block;
    }

If I try to set a height to foul-row class, either I have scrollbars in the containing cell div, or I can't see foul divs.

Here there is cell class

.cell{
  padding: 6px 8px 0 8px;
  white-space: nowrap;
  font-size: 13px;
  min-width: 27px;
  display: block;
  overflow: auto;
  height: 36px; /*I would like to remove this, but if I do, I have visualization problems*/      
}

and this is the structure of the "incriminated" cell

     <div class="cell white">
        <div>Home Team</div>
        <div class="foul-row">
          <div class="foul"></div><div class="foul"></div><div class="foul">/div><div class="foul"></div><div class="foul"></div>
        </div>
      </div>

How can I reduce foul-row height to fit foul height and reduce the total height of cell div? Thanks

Answer 1

Your height:4px is being overriteen by the font-size, which is by default 16px,because it needs to have space for the text to show up.

Now since div.foul doesn't have any text it will be fine to set it's font to 0.

body {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /*   background-image: url(https://dynamitick.com/wp-content/uploads/2018/01/legnano-basket-19-sempione-news.jpg); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.red {
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
}

.blue {
  background-color: rgba(0, 0, 255, 0.7);
  color: white
}

.black {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.green {
  background-color: rgba(0, 128, 0, 0.7);
  color: white;
}

.yellow {
  background-color: rgba(255, 255, 0, 0.7);
  color: blue;
}

.white {
  background-color: rgba(255, 255, 255, 0.7);
  color: blue;
}

.grey {
  background-color: rgba(128, 128, 128, 0.7);
  color: white;
}

.score {
  text-align: right;
}

.cell {
  padding: 6px 8px 0 8px;
  /*   display: inline-flex; */
  /*    overflow: auto; */
  white-space: nowrap;
  font-size: 13px;
  min-width: 27px;
  /*   min-height: 16px; */
  display: block;
  overflow: auto;
  height: 36px;
  /*   text-overflow: ellipsis */
}

.shadow {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
}

.column {
  display: inline-block;
  height: 100%;
}

.separator {
  display: inline-block;
  width: 1px;
}

.timer {
  /*   width: 60px; */
  text-align: center;
}

.container {
  border-radius: 10px;
  overflow: hidden;
  display: table;
  clear: both;
  font-size: 0;
  animation-name: rotation;
  animation-duration: 1s;
  border: 1px solid grey;
}

@keyframes rotation {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.bottom-left {
  position: absolute;
  bottom: 3vh;
  left: 2vh;
}

.bottom-right {
  position: absolute;
  bottom: 3vh;
  right: 2vh;
}

.top-right {
  position: absolute;
  top: 3vh;
  right: 2vh;
}

.top-left {
  position: absolute;
  top: 3vh;
  left: 2vh;
}

.message-title {
  text-align: center;
}

.message-body {
  text-align: center;
  min-width: 150px;
  background-color: rgba(0, 0, 0, 0.66);
  color: white;
  text-transform: none
}

.half-shadow-up {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(128, 128, 128, 1));
}

.tv-logo img {
  max-width: 150px;
  max-height: 150px;
  margin: auto;
}

.foul {
  background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(92, 92, 92));
  height: 4px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0;
  margin-right: 2px;
  width: 15px;
  display: inline-block;
}

.foul-row {
  height: 4px;
}

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div class="container shadow top-right">
  <div class="column timer">
    <div class="cell red"><span>00:00</span></div>
    <div class="cell red">Q4</div>
  </div>
  <div class="separator"></div>
  <div class="column">
    <div class="cell white">
      <div>Home Team</div>
      <div class="foul-row">
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
      </div>
    </div>
    <div class="cell green">
      <div>Guest team</div>
      <div class="foul-row">
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
      </div>
    </div>
  </div>
  <div class="separator"></div>
  <div class="column score">
    <div class="cell white">
      100
    </div>
    <div class="cell green">
      65
    </div>
  </div>
</div>
<div class="container bottom-left">
  <div class="column">
    <div class="cell white half-shadow-up message-title">
      10 A. Player
    </div>
    <div class="cell message-body">
      24 pts, 8 reb
    </div>
  </div>
</div>

Answer 2

Please try adding your height:4px to foul-row after changing the overflow property on your cell element to hidden:

.cell{
  padding: 6px 8px 0 8px;
  white-space: nowrap;
  font-size: 13px;
  min-width: 27px;
  display: block;
  overflow: hidden; /* changed */
  height: 36px;    
}