Cellphone Shrink and Span Text Flow Options

[Bill in PA]

When I view this webpage on a computer it works fine. As I shrink or increase the container size, the number of words per line increases or decreases as desired.

But when I view it on a cellphone, shrinking or enlarging the container the text increased or decreases, but the number of words per line doesn't change and they overflow and disappear when enlarged enough

[Christian J]

As I shrink or increase the container size

You mean by zooming or resizing the browser window?

But when I view it on a cellphone, shrinking or enlarging the container the text increased or decreases, but the number of words per line doesn't change and they overflow and disappear when enlarged enough

Maybe it's because of the "max-width" and "overflow: hidden" here:

CODE

.tab { max-width: 600px; }

.tab .content {
  background: #ccdef9;
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .content { max-height: 100vh; }