I tried to create a 3 div container with max-width 400px; after I changed the direction to flex-direction: column; I lost the width of my container.
(After changing the flex-direction to column my containers are not in the same order)
as shown in the image, the flex row will make the boxes allocated correctly and if I switched to column, the containers are not taking the defined max-width 400px;.
body { font-family: "Sono", sans-serif;}.pricing-container { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; align-items: center;}.pricing-plan { padding-top: 10px; background: rgb(245, 241, 241); flex: 1; text-align: center; max-width: 300px; border-radius:5px ;}.plan-title { font-size: 20px; font-weight: 1000;}.plan-price { font-size: 25px; font-weight:800;}ul { list-style-type: none;}li { padding: 5px;}.plan-button { margin-bottom: 10px; background-color: rgb(255, 94, 0); border-radius: 5px; padding: 10px; font-size: 11px; color: white; border: 0px white;}@media (max-width: 1000px) { .pricing-container { flex-direction: column; }}<!DOCTYPE html><html><head><title>Flexbox Pricing Table</title><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet" /></head><body><div class="pricing-container"><div class="pricing-plan"><div class="plan-title">Normal</div><div class="plan-price">$9/month</div><ul class="plan-features"><li>10GB Storage</li><li> 1 User</li><li>🚫 Support</li></ul><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Standard</div><div class="plan-price">$19.99/month</div><ul class="plan-features"><li>50GB Storage</li><li>5 Users</li><li> Phone & Email Support</li></ul><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Premium</div><div class="plan-price">$49.99/month</div><ul class="plan-features"><li> 100GB Storage</li><li> 10 Users</li><li> 24/7 Support</li></ul><button class="plan-button">Sign Up</button></div></div></body></html>