How do I size a scrollable div's child to its "natural" width?-CodePudding

I have a text where I want the lines to be broken exactly at the position given with <br>. This text should be scrollable in a view port whose width is smaller than the width of the text. If I know the width of the text by experimenting, I can set the corresponding text div's width property to that width, as done in the following example:

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>overflow css property</title>

  <style type="text/css">

    div.container {
      position: absolute;
      width: 150px;
      height: 110px;
      border: 1px solid black;
      left: 30px;
      top: 20px;
      overflow: scroll;
    }

    div.text {
      position: static;
      background-color:yellow;
      width:300px; /* I'd rather not hardcode this value */
    }

    
  </style>

</head>
<body>


  <div class='container' id='right'>
    <div class='text'>
    Lorem ipsum dolor sit amet, consectetur<br>
    adipiscing elit, sed do eiusmod tempor<br>
    incididunt ut labore et dolore magna aliqua.<br>
    Ut enim ad minim veniam, quis nostrud<br>
    exercitation ullamco laboris nisi ut aliquip<br>
    ex ea commodo consequat.<br>
    Duis aute irure dolor in reprehenderit in<br>
    voluptate velit esse cillum dolore eu fugiat<br>
    nulla pariatur. Excepteur sint occaecat<br>
    cupidatat non proident, sunt in culpa qui<br>
    officia deserunt mollit anim id est laborum.
    </div>
  </div>

</body>
</html>

This works fine, but I'd rather not hardcode the width to 300px because the actual text is dynamically created and its width might vary. Thus the question: is it possible to make the text div's width to be the "natural" width?

CodePudding user response：

I suppose you don't want a line-break elsewhere than where you defined it, then you can use min-width: max-content; so there is no need to hardcode the exact value of the width (that may vary, e.g., if the user want to zoom-in your text).

.text {
  min-width: max-content; 
  font: 1rem/1.5 system-ui;
}

<div class='text'>
    Lorem ipsum dolor sit amet, consectetur<br>
    adipiscing elit, sed do eiusmod tempor<br>
    incididunt ut labore et dolore magna aliqua.<br>
    Ut enim ad minim veniam, quis nostrud<br>
    exercitation ullamco laboris nisi ut aliquip<br>
    ex ea commodo consequat.<br>
    Duis aute irure dolor in reprehenderit in<br>
    voluptate velit esse cillum dolore eu fugiat<br>
    nulla pariatur. Excepteur sint occaecat<br>
    cupidatat non proident, sunt in culpa qui<br>
    officia deserunt mollit anim id est laborum.
</div>

CodePudding user response：

Yes, you can use max-width: fit-content; on div.text.

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

CodePudding user response：

A use case for the old white-space:nowrap

div.container {
  position: absolute;
  width: 150px;
  height: 110px;
  border: 1px solid black;
  left: 30px;
  top: 20px;
  overflow: scroll;
}

div.text {
  background-color: yellow;
  display: inline-block; /* to make sure the color cover all the element*/
  white-space: nowrap;
}

<div class='container' id='right'>
  <div class='text'>
    Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit, sed do eiusmod tempor<br> incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud<br> exercitation ullamco laboris nisi ut aliquip<br> ex ea commodo consequat.<br>    Duis aute irure dolor in reprehenderit in<br> voluptate velit esse cillum dolore eu fugiat<br> nulla pariatur. Excepteur sint occaecat<br> cupidatat non proident, sunt in culpa qui<br> officia deserunt mollit anim id est laborum.
  </div>
</div>

CodePudding user response：

Not sure if this is exactly what you're after but you might be able to use calc()

div.text {
  position: static;
  background-color:yellow;
  width:calc(100% * 2);
}