Блог

root div должен иметь минимальную ширину, 100 пикселей не является фиксированным. Я просто ставлю width: 200px в качестве начальной ширины. Потому что, если я не ставлю минимальную ширину, она просто расширяется на всю область. Как я могу сделать его более удобным для пользователя, он должен просто соответствовать ширине содержимого, чтобы не нарушать его, пока оно не займет 100% / полную ширину.

 <div class="root">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis quam dignissimos perspiciatis ea illum ut.
</div>
  

 .root {
  width: 200px;
  max-width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
}
  

Вы можете попробовать display: inline-block

 .root {
  display: inline-block;
  max-width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
}  

  <div class="root">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis quam dignissimos perspiciatis ea illum ut.
</div>