Div with max-content width does not break line

Question

I’m trying to create a container whose maximum width is proportional to that used by the internal text itself (so I used the max-content), however, when the width of the screen is less than the width of the div, there is no breaking of the text, since the div is occupying only one line.

It is possible to actually make the maximum width proportional to the internal text, and still make the line break if the width of the screen is less than the width of the div?

I reproduced, minimally, the problem situation in the code below:

div {
    font-size: 28px;
    background: #eee;
    padding: 10px;
}

div.com-max {
    width: max-content;
}

div.sem-max {
  font-size: 14px
}

<p>Com o max-content: O texto fica ajustado, mas não ocorre uma quebra de linha quando o conteúdo é maior que a largura atual (a fonte maior é para dar um exemplo do problema).</p>
<div class="com-max"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.<a href="#">link</a>.</span></div>

<br>

<p>Sem o max-content: Fica um espaço demasiado após o fim do texto.</p>
<div class="sem-max"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#">link</a>.</span></div>

Answer 1

If the goal is to limit the div to the screen size you can try the max-width: 100vw; which is relative to the view-port size:

.foobar {
    font-size: 28px;
    background: #eee;
    padding: 10px;
}

.foobar.com-max {
    width: max-content;
    max-width: 100vw;
}

<p>Com o max-content: O texto fica ajustado, mas não ocorre uma quebra de linha quando o conteúdo é maior que a largura atual (a fonte maior é para dar um exemplo do problema).</p>
<div class="foobar com-max"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.<a href="#">link</a>.</span></div>