CODEWITHSUNDEEP
htmlcss
Samuel
Samuel

Reputation: 113

Responsive padding/width depending on the content

Let's say I have two divs:

<div id="wrapper">
     <div id="text">Text!</div>
</div>

The div which has the id "wrapper" needs to have, as its minimum width, the width of its content added a value of 7px. The maximum width would be the width of its content plus 15px. The width of the div which has the id "wrapper" should be responsive when it's not possible to set the max width, but it's possible to set a value in between the minimum and maximum allowed. How would I do it using CSS? (It can be either adjusting padding or width).

I've tried using the flex css property, like:

flex: 0 1 10%;

It does make the width responsive, but I couldn't define the minimum and maximum values in terms of the width of its content plus the number of pixels.

I've tried using the clamp css function for padding, like:

padding-right: clamp(7px, 50%, 15px);
padding-left: clamp(7px, 50%, 15px);

But it didn't work. How would I do it using CSS?

Upvotes: 3

Views: 960

Answers (1)

Temani Afif
Temani Afif

Reputation: 273261

Use a pseudo element to simulate the padding and consider flexbox to define their size.

Resize your screen to see how the size of the padding changes:

#wrapper {
  display:inline-flex;
  max-width:100%;
}
#wrapper::before,
#wrapper::after {
  content:"";
  min-width:7px;
  width:15px;
  flex-shrink: 9999; /* to shrink faster than the text*/
  
  background:red; /* to illustrate*/
}
<div id="wrapper">
  <div id="text">some responsive Text here!</div>
</div>

Upvotes: 2

Related Questions