I have no answers to these puzzles now. If you have any idea, please let me know.

Why there is an empty line above test?

1<div style="border: 1px solid #999">
2  <div style="display: inline-block">
3    <div style="display: flex">
4      <div style="width: 0; height: 0; overflow: hidden">element of size 0</div>
5      <div>test</div>
6    </div>
7  </div>
8</div>

Maybe related:

strut: Visual formatting model details

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

Why does td2 overlap with td3?

 1<table style="width: 200px">
 2  <tr>
 3    <td>td1</td>
 4    <td style="white-space: nowrap">
 5      <input style="width: 100%" />
 6      <span style="color: aqua">td2</span>
 7    </td>
 8    <td style="color: violet">td3</td>
 9  </tr>
10</table>