调整窗口大小时，Flexbox 中的元素会晃动

Question

我正在使用 CSS flexbox 创建一个包含 2 个元素的行：

1. 带有标题和段落宽度为 50% 的 div
2. 宽度为 28rem 且包含 Flexbox 网格的 div。

该行设置为

flex-wrap: wrap

。 问题是，当调整窗口大小时，网格中宽度为

28rem

的元素开始晃动，这看起来不太好。

<h2>

元素（绿色）使用

font-size: calc(1.375rem + 3.525vw)

，但是即使使用固定值也无法解决问题。

如果我从 JSFiddle 运行代码，那么震动会比如果我创建空 html 文件粘贴代码并在 Chrome 本地运行它要小得多。要查看它，请几乎全屏显示并调整窗口大小以将其缩小。震动很大。

我在此处包含代码（也可在 jsfiddle 上找到）
https://jsfiddle.net/qpcv5tbu/4/
https://jsfiddle.net/qpcv5tbu/3/show

视频：streamable.com/3ax7vc 文件：file.io/xITB0gUaEqMN

<div id="wrapper">

    <div class="fifty">
        <h1>My heading
        </h1>


        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sagittis nulla. Nulla efficitur, sapien sit
            amet molestie aliquet, velit dolor lacinia enim, at aliquam nibh nunc at orci. Phasellus consectetur ligula
            vehicula congue mattis. Integer congue egestas augue vitae scelerisque. Fusce nec dolor non purus aliquam
            bibendum sit amet vitae augue. Pellentesque id enim sem. Pellentesque semper dolor eu ante lacinia blandit.
            Curabitur venenatis libero et quam mollis rutrum.

            Morbi a lectus purus. In bibendum nulla sem, eget pellentesque diam elementum eget. Quisque in tempor quam.
            Aliquam lacinia aliquet augue, ut pulvinar eros auctor in. Morbi eu facilisis nisl, sit amet mattis elit.
            Sed lacus erat, volutpat ac sem sed, interdum luctus risus. Morbi elementum ante urna, eget egestas nisi
            accumsan vitae. Nullam eget sagittis ipsum. Donec vitae finibus ante. Nam eleifend eros odio, et suscipit
            ante cursus eget. Phasellus bibendum est quis purus placerat, sit amet ullamcorper orci ullamcorper.
            Curabitur dictum malesuada enim vitae vestibulum. Sed ut mattis libero, vitae commodo sem. Integer sit amet
            pharetra ipsum.</p>
    </div>


    <div class="grid">

        <div class="item"> <!---ELEMENT THAT IS SHAKING-->
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>


        <div class="item">
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>

        <div class="item">

            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>

        <div class="item">
            <h3>10</h3>
            <p> Morbi a lectus purus. In bibendum nulla sem, eget pellentesq</p>
        </div>
    </div>

</div>

#wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px;
        flex-wrap: wrap;
    }

    .fifty {
        width: 50%;
    }

    .item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0px 0px 0px 20px;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid white;
        width: 45%;
        flex-direction: column;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
        margin: 0px;
        width: 28rem;
    }

    h3 {
        color: rgb(45, 235, 184);
        font-size: calc(1.375rem + 3.525vw);
        font-family: Halvetica;
    }

Answer 1

• 您使用

  grid-template-columns: 1fr 1fr;

  声明的方式是错误的。如果不设置

  display: grid;

  属性，它将不起作用。
• 您的

  width: 28rem;

  类不需要

  grid

  声明。它不会像你预期的那样工作。不要给你的元素明确的值。这破坏了 HTML 的自然行为。您可以使用

  flex-basis

  属性设置 Flex 元素的宽度。您还可以检查

  flex

  简写属性来设置

  flex items

  的行为。
• 如果您想使用

  viewport lenght unit

  作为字体，您可以将其与

  clamp()

  功能一起使用。您可以像这样设置最小值和最大值

  font-size: clamp(1.5rem, 2.5vw, 4rem);