问在没有可视化问题的情况下无法降低div高度

EN

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>

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