How to make flex box (not only for width)

Question

As you know there's a Flex-Box on w3schools example https://www.w3schools.com/css/css3_flexbox.asp . I want to use this logic somewhere in my project and changed a little of this flexBox demo as I wished.When you make the page width less by mouse cursor,box is only getting smaller as width.I also want it getting smaller the height of the box in the same ratio as width getting smaller.This is what Google Material Grid does but I can't use it because I'll use this inside Mat-Menu,not as Grid which covers whole page.Here I tried to demonstrate what I want with images and added what I've done in the code below

What I tried https://www.w3schools.com/code/tryit.asp?filename=G8UM6A52JZL9

What happens when you make smaller of the box(Only width is getting less)

Here what I want to achieve (height and width both getting aligned):

if you want to resize an element according to the viewport keeping his aspect-ratio you need to use javascript or jQuery, to determinate the zoom percentage to apply . — Sim1-81, Oct 11 '19 at 14:44
What happens to the text when you resize the window? If you want an aspect ratio div, then you will need to use the padding top trick: https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css — Pete, Oct 11 '19 at 14:50
Text also should be responsive.It should be smaller also.I can handle it somehow there is vw property for font-size — Timuçin Çiçek, Oct 11 '19 at 14:52

score 1 · Accepted Answer · answered Oct 11 '19 at 15:48

use viewport width(vw) property to adjust the line-height. Run the result on the full screen and resize the browser window and see the difference.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  font-size: 30px;
  line-height: calc(20px + 5vw)
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>Something here</div>
</div>

Thanks very much exactly what I was looking for – Timuçin Çiçek Oct 11 '19 at 17:17 — Timuçin Çiçek, Oct 11 '19 at 17:17

How to make flex box (not only for width)

1 Answers1