模拟max/min-margin

一开始是这样的布局

    <div class='w-20 h-60 flex flex-col'>
      <div class='h-20 bg-red-400 mb-auto'></div>
      <div class='h-20 bg-blue-500'></div>
    </div>

但是在缩放时显示异常 中间的间距常常过小或过大
在中间使用div模拟margin

    <div class='w-20 h-60 flex flex-col'>
      <div class='h-20 bg-red-400'></div>
      <div class='flex-1 pointer-events-none max-h-15 min-h-5'></div>
      <div class='h-20 bg-blue-500'></div>
    </div>

这样可以确保间距受控 且不影响下方元素的交互