Setting font-size based on height of flexbox container

Question

I am wondering if it possible to set the font-size using the height of flexbox items. I have a flexbox container set using viewport units and the height of the items are determined by flex-grow property. What I am looking do is set the font-size to the height of these items, and to retain these relationships as the viewport changes.

I have a basic idea that is somewhat working but I am not exactly sure how to isolate only the letter (baseline to cap height) and scale that to the item container.

https://codepen.io/NewbCake/pen/JvwNJq (resize window vertically to set font-size)

I am open to any suggestions on how to approach this or any pitfalls that this may encounter.

HTML

<section class="center">
  <div class="container">
    <div class="item1">H</div>
    <div class="item2">H</div>
  </div>
</section>

CSS

section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.container_wide {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

.item2 {
  flex-grow:3;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

JS

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
    $(".item1").css("font-size", $(".item1").css("height"));
    $(".item2").css("font-size", $(".item2").css("height"));            
  }, 250);
});

Any help is appreciated!

Solution

If you have the control of the flex-grow you can do some calculation to get the font-size based on the height on the container. So if you have a 1 + 2 as flex-grow, it means that the second one will be twice the first one so we can define a H height as H+2*H = height of container = 80vh so H = calc(80vh / 3).

So the first item will have font-size:H and the second one will have font-size:2*H.

You may also consider CSS variable to better handle this.

body {
   margin:0;
  padding:0;
  font-family: sans-serif;
}

header {
  display:flex;
  height:5vh;
}
section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  --h:80vh;
  height:var(--h);
  width:var(--h);
  border:1px solid blue;
}

.gauge {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:10vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  font-size:calc((var(--h) / 3));
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}

.item2 {
  font-size:calc((var(--h) / 3) * 2);
  flex-grow:2;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}

<header class="center">resize window vertically</header>
<section class="center">
  <div class="gauge">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
  <div class="container">
    <div class="item1">Haj</div>
    <div class="item2">Hlp</div>
  </div>
</section>

Comments

[NewbCake]

Hi @Temani Afif thanks for the reply. It is an interesting way of using calc to set the font-size. However, I am looking to keep it more flexible and be able to change the the container height only in one place while still retaining the the flex-grow relationship, or visa versa. But maybe it's possible to do by setting both the container height and flex-grow property as separate variables? I am not very familiar with how to do that in css. Another issue is that this doesn't change dynamically as the viewport changes (unless refreshing the page). Can we do this by retaining the JS?

[Temani Afif]

@NewbCake you can use CSS varible (check my edits) ... by the way how this not changing dyamically ? it's not chaning on the snippet when resizing ? ... by the way no more need the jS function

[NewbCake]

@ Temani Afif that works well with the variables. Would it be possible to set the flex-grow with a variable do the calc is only based on variables? By not changing dynamically I mean that the content isn't resizing as I change the size of the browser window. Could JS be used only to detect window resize and recalculate the font-size value?

[Temani Afif]

@NewbCake the whole point of my answer is that it resize dynamically :) am surprised you said it's not ... which browser are you using ?

[NewbCake]

its working in Chrome and Firefox but not Safari...any idea why?

[Temani Afif]

@NewbCake strange .. I will see maybe calc with vh unit is not supported in Safari, will investigate.

[Temani Afif]

@NewbCake as expected, there is a lack of support .. check this link : caniuse.com/#search=calc and see the known issues, you see that vh/vw aren't supported within calc for safari