html - 响应式填充/宽度取决于内容

Question

假设我有两个 div:

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

id 为“wrapper”的div 需要将其内容的宽度作为其最小宽度添加7px 的值。最大宽度是其内容的宽度加上 15px。当无法设置最大宽度时，id 为“wrapper”的 div 的宽度应该是响应式的，但可以设置一个介于允许的最小值和最大值之间的值。我将如何使用 CSS 来实现？ (它可以是调整填充或宽度)。

我试过使用 flex css 属性，例如:

flex: 0 1 10%;

它确实使宽度响应，但我无法根据其内容的宽度加上像素数来定义最小值和最大值。

我试过使用 clamp css 函数进行填充，例如:

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

但是没有用。我将如何使用 CSS 来实现？

Answer 1

使用伪元素来模拟padding，并考虑使用flexbox来定义它们的大小。

调整屏幕大小以查看填充大小如何变化:

#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>