如何同时使用最小和最大宽度？

Question

root div的最小宽度应固定为100px。我只是将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;
}

Answer 1

您可以尝试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>