CODEWITHSUNDEEP
htmlcss
The Chosen User
The Chosen User

Reputation: 23

How to use both minimum and maximum width?

The root div should have a minimum width, 100px is not fixed. I just put the width: 200px as a initial width. Because if I don't put a min-width it just expands to the full area. How can I make it more user friendly, It should just fit the width with the content not to break it until it takes 100% / full width.

<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;
}

Upvotes: 1

Views: 41

Answers (1)

Tahazzot
Tahazzot

Reputation: 1262

You can try 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>

Upvotes: 1

Related Questions