Table has huge space when is child of div flex-CodePudding

I'm trying to put an HTML table on the right side of a canvas and for some reason, it has huge spaces between rows.

I've tried the solution here and here but none of them solved the problem.

Here's my current code:

<html>

<body style="margin: 0px">
  <div style="display: flex">
    <canvas style="background-color: blue;"></canvas>
    <table>
      <tbody>
        <tr>
          <td>hi</td>
          <td>l</td>
        </tr>
        <tr>
          <td>lol</td>
        </tr>
    </table>
  </div>
</body>

</html>

CodePudding user response：

Solution 1 - Set `align-items: flex-start` in `div` because the default value is `stretch`

div {
  display: flex;
  align-items: flex-start;
}

canvas {
  background-color: blue;
}

table {
  border: 1px solid red;
}

<div>
  <canvas></canvas>
  <table>
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>

Solution 2 - Set `align-self: flex-start` in `table`

div {
  display: flex;
}

canvas {
  background-color: blue;
}

table {
  border: 1px solid red;
  align-self: flex-start
}

<div>
  <canvas></canvas>
  <table>
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>

CodePudding user response：

Set the table height to min-content

<table style="height: min-content;"> ... </table>

<div style="display: flex">
  <canvas style="background-color: blue;"></canvas>
  <table style="height: min-content;">
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>

Solution 1 - Set align-items: flex-start in div because the default value is stretch

Solution 2 - Set align-self: flex-start in table

Solution 1 - Set `align-items: flex-start` in `div` because the default value is `stretch`

Solution 2 - Set `align-self: flex-start` in `table`