Css: flexbox last row has double height

Question

I played a little with flexboxes and tried to emulate a table like LaTeX with top / mid / bottomrule. I like that the table scales well and switches to a list, like on small screens.

However, I noticed that if I use a space in the text content of the cell, the cell height can double or even triple without any argument.

Is there a flexbox -property that I forgot and can help me fix this behavior? Why is this extra height even generated?

Screenshot:

Excerpt:

div.table {
  display: flex;
  flex-flow: column wrap;
  width: 70%;
  margin: 15px auto;
  border-bottom: 2px solid black;
}
div.row {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
div.head {
  flex: 1;
  text-align: center;
  align-items: flex-start;
  font-weight: bold;
  border-width: 2px 0 1px;
  border-style: solid;
}
div.item {
  flex: 1;
  text-align: center;
  align-items: flex-start;
}

<div class="table">
  <div class="row">
    <div class="head">Col 1</div>
    <div class="head">Col 2</div>
  </div>
  <div class="row">
    <div class="item">Cell 1</div>
    <div class="item">Cell2</div>
  </div>
  <div class="row">
    <div class="item">Cell 3</div>
    <div class="item">Cell 4</div>
  </div>
</div>

Run codeHide result

Answer 1

, .row , .item. .item flex, - flex: 1. , .

:

.row {
  display: inline-flex;
  margin: 2px;
}
.item {
  border: 1px solid;
}
.flex {
  flex: 1;
}

<div class="row">
  <div class="item">Cell 11111</div>
  <div class="item">Cell 2</div>
  (before flex)
</div>
<br />
<div class="row">
  <div class="item flex">Cell 11111</div>
  <div class="item flex">Cell 2</div>
  (after flex)
</div>

Hide result

Cell 1 ( ) Cell2 (), .

, .row , , , , , , . , , . ,

• ()

  - (, flex ), , fit-content .

• flex. .

• (). , . , .

, .table , flex-wrap: nowrap. , flex , , , definite:

, - - - ( ) .

div.table {
  flex-flow: column;
}

div.table {
  display: flex;
  flex-flow: column;
  width: 70%;
  margin: 15px auto;
  border-bottom: 2px solid black;
}
div.row {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
div.head {
  flex: 1;
  text-align: center;
  align-items: flex-start;
  font-weight: bold;
  border-width: 2px 0 1px;
  border-style: solid;
}
div.item {
  flex: 1;
  text-align: center;
  align-items: flex-start;
}

<div class="table">
  <div class="row">
    <div class="head">Col 1</div>
    <div class="head">Col 2</div>
  </div>
  <div class="row">
    <div class="item">Cell 1</div>
    <div class="item">Cell2</div>
  </div>
  <div class="row">
    <div class="item">Cell 3</div>
    <div class="item">Cell 4</div>
  </div>
</div>

Hide result

:

div.row {
  width: 100%;
}

whitespace: nowrap.

Answer 2

div.item flex: 1; flex-grow:1;.

.

div.table {
  display: flex;
  width: 70%;
  margin: 15px auto;
  border-bottom: 2px solid black;
}
div.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
div.head {
  flex: 1;
  text-align: center;
  align-items: flex-start;
  font-weight: bold;
  border-width: 2px 0 1px;
  border-style: solid;
}
div.item {
  flex-grow: 1;
  text-align: center;
  align-items: flex-start;
}

<div class="table">
  <div class="row">
    <div class="head">Col 1</div>
    <div class="head">Col 2</div>
  </div>
  <div class="row">
    <div class="item">Cell 1</div>
    <div class="item">Cell2</div>
  </div>
  <div class="row">
    <div class="item">Cell 3</div>
    <div class="item">Cell 4</div>
  </div>
</div>

Hide result