Elements in flexbox are shaking when resizing window

Question

I am using CSS flexbox to create a row that has 2 elements:

1. div that has 50% width with heading and paragraph
2. div that has width of 28rem and contains flexbox grid.

the row is set to flex-wrap: wrap. The problem is that when resizing the window, the elements in the grid with the width of 28rem start shaking which doesn't look nice. The <h2> element (green) uses font-size: calc(1.375rem + 3.525vw), however even using fixed values didn't fix the problem.

If I run the code from JSFiddle shakes way less than If I create empty html file paste the code and run it locally in Chrome. To see it, go almost full-screen and resize the window to shrink it. It shakes a lot.

I am including the code here (also available on jsfiddle)
https://jsfiddle.net/qpcv5tbu/4/
https://jsfiddle.net/qpcv5tbu/3/show

video: streamable.com/3ax7vc file: 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

• You are using the grid-template-columns: 1fr 1fr; declaration the wrong way. It won't work if you don't set the display: grid; property.
• You don't need the width: 28rem; declaration for your grid class. It won't work as you expected. Don't give your elements explicit values. This breaks the natural behavior of HTML. You can set the width of flex elements with the flex-basis property. You also check the flex shorthand property to set the behavior of the flex items.
• If you want to use the viewport lenght unit for the fonts, you can use it with the clamp() function. You can set the minimum and maximum values like this font-size: clamp(1.5rem, 2.5vw, 4rem);

Answer 2

Okay I found out what it was shaking so much. I found out that this even happens when resizing different flexbox grid from another developer - (https://shorturl.at/flzH4).

In Google Chrome browser on macOS the entire browser window along with UI was shaking. I know it sounds crazy, but even the entire top row with search bar and browser extensions icons extension was visibly shaking. No such problem in Safari.

Answer 3

I checked the source you mentioned. I think you have other problems. You're not using the width property with the correct way. Comments on these declaration blocks and check the flexbox behavior again:

 #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); */
    }