在跳跃之前让div缩小

Question

我有两个div在一起。两者都包含一个表。左边的那个小于右边的那个。

首先，我希望右边的那个能够占用尽可能多的空间，而不会让左边的div跳下来。也。我希望这个正确的div随着窗口大小变小，直到它不能变小，然后它会跳下来。

现在发生的事情是，div右移首先跳下，然后随着窗口变小而收缩。我想首先收缩它，然后如果窗口变小，它会跳下来。

希望你能得到我所说的：

<div id="left">
    <table>
        <tr>
            <td>Content here is not so wide</td>
        </tr>
    </table>
</div>

<div id="right">
    <table>
        <tr>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
        </tr>
    </table>
</div>

Answer 1

您应该将两个元素放在容器中，并使用display：flex;

然后，您将能够为第一个元素设置宽度，并将另一个元素的宽度设置为最大宽度。还为第二个元素添加最小宽度。

最后，你需要将两个元素都显示为内联块，这样当第二个元素变小时，它就会跳下来。