Elements in Flexbox dont move, when i shrink the size of my window-CodePudding

I want that the div panel_pricing-table becomes an flexbox so that all elements in it stay in this box also when i make my window smaller. My problem is that the elements in the flexbox wont shrink, if i make my browser window smaller. The mistake is in CSS but i dont find it. Can you help me pls?

Screenshot of the problem

Here is my HTML:

html {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body{
    background-color: #3a86ff;
    
}

.panel_pricing-table{
width:80%;
margin: 0 auto;
 display :flex;
  transform: translateY(70%);
 background-color: aliceblue;
 min-width: 40px;
 max-width: 34200px;

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Tiers</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans:400,600,700">
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <div >

        <div >
            <img src="icons/icon1.png" alt="" >
            <h2 >Personal</h2> 
            <ul >
                <li >Custom domains</li>
                <li >Sleeps after 30 mins of inactivity</li>
            </ul>
            <span >Free</span>
            <a href="#/" >Sign up</a>
        </div>

        <div >
            <img src="icons/icon2.png" alt="" >
            <h2 >Small team</h2>
            <ul >
                <li >Never sleeps</li>
                <li >Multiple workers for more powerful apps</li>
            </ul>
            <span >$150</span>
            <a href="#/" >Free trial</a>
        </div>

        <div >
            <img src="icons/icon3.png" alt="" >
            <h2 >Enterprise</h2>
            <ul >
                <li >Dedicated</li>
                <li >Simple horizontal scalability</li>
            </ul>
            <span >$400</span>
            <a href="#/" >Free trial</a>
        </div>

    </div>

</body>

</html>

CodePudding user response：

you should learn responsive_html, it will solve the problem

CodePudding user response：

A (in my opinion quite dirty) way to shrink the elements would be to use transform: scale(x) with x being smaller than 1.

What you probably want to do is use smaller font-sizes on smaller viewports. A good starting point to learn more about responsiveness in css would be to read about media queries: mdn docs

CodePudding user response：

Add this in your css file. You have to make your image size small
For my reference, i have kept the width 80 you can keep whatever you want

.pricing-img{
    width:80%
  }