-1

I have box with a number width and I want change font size of child element base on parent width , I used vw or em , but not work , Is is possible with just css or sass

<div class="timer" >
 <div class="timer__minute">12</div>
</div>

sass

.timer{
min-width:100px;
max-width:500px;
&__minute{
 padding:10px
}
}
tmohammad78
  • 177
  • 2
  • 17
  • I doubt if there are magicians on Stack Overflow who can debug code they can't see.. Kindly post your code alongside your question – Professorval Oct 10 '20 at 07:00
  • 1
    Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) Check the second best voted answer but more or less answer is: It is not possible if you have max-width. or you make it in svg as 3rd best voted – MaxiGui Oct 10 '20 at 08:04

1 Answers1

-2

:root {
  --width: 10em;
}

.parent {
width: var(--width);
height: 100px;
border: 1px solid #333;
display: grid;
place-content: center;
}

.parent p {
  margin: 0;
  font-size: calc(var(--width) /4);
}
<div class="parent">
  <p>Hello</p>
</div>

Use Custom property or sass variables and calc function to desire your needs

susanta96
  • 89
  • 5