How to make the content fit the container by automatically changing the font-size?

[AnnaxT]

Hi,

I’m working on the calculator project and the react / js part is done but I have a problem with CSS - when I type a lot of digits the display screen and the buttons automatically extend and get outside of the container. Please see the picture. I don’t know how to fix it and make the font-size automatically smaller when the numbers don’t fit.

Can someone please help?

CSS:

.Layout {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: linear-gradient(to right, #8360c3, #2ebf91);

  @media (max-width: 414px) {
    background: none;
  }
}
.container {
  position: relative;

  width: 350px;
  height: calc(100vh - 45%);

  padding: 2rem;
  display: grid;
  grid-template-rows: 25% auto;
  font-size: 1.75rem;

  color: #333;
  background-color: $dark-grey;
  border-radius: 1rem;
  box-shadow: 1.5rem 1.5rem 4rem -0.8rem rgba(0, 0, 0, 0.75);
}
.top {
    background-color: $display;
  }
  .middle {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(4, 1fr);

    position: relative;
    padding: 10px 0;
    z-index: 100;
}
}

Thank you!

[bbsmooth]

I think you would have to use JS to do this, possibly with a ResizeObserver. Short of that there are other options you could consider. Perhaps putting a limit on the number of spots after the decimal. And a max for whole numbers? Or you could allow the display to horizontal scroll if it gets too wide. Even if you did make the font smaller to accommodate more numbers you are still going to run into this problem again if you don’t add a limit, because no matter how small you make the font I can always type more numbers

[parkerjmartin]

@AnnaxT

414px

Try changing your display to inline-block, set height to auto and width to 100%( set px be problematic)
Just guessing.
Hope this helps.

[AnnaxT]

Thank you I eventually made it work with JS.