How to set auto height if div's content are numbers?

Question

I tried height auto, flex-wrap: wrap, but it's not working.

If the content of div is text it's changing its height depend on content, but if content is only numbers it's not working, it's written in one line, "cutting" the given length.

Here is the code

<div id="canvas">155555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>

#canvas{
    width: 500px;
    /* min-height: 24px; */
    height: auto;
    overflow: hidden;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    background-color: grey;
    border: 3px solid rgb(90, 90, 90);
    color: white;
}

Answer 1

You can use word-break: break-word; property to break number string.

#canvas{
  width: 500px;
  /* min-height: 24px; */
  height: auto;
  overflow: hidden;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  background-color: grey;
  border: 3px solid rgb(90, 90, 90);
  color: white;
  word-break: break-word;
}

<div id="canvas">155555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>