代码之家 › 专栏 › 技术社区 › dc-p8

禁用元素的增长能力

css html

dc-p8 · 技术社区 · 5 年前

问题的最小再现:

.fixed{
  display: inline-block;
  max-width: 5em;
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
}

.wrapper{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgba(0,200, 0, 0.1);
  width: fit-content;
}

p{
  display: inline-block
}

body{
}

.text{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
}

<div class="wrapper">
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="text">
    this long paragraph should not increase the size of the parent but as you can see, it doessdfsdfsfsdfsdfsdf sdf sdf 
  </div>
  
</div>

如果删除文本div,可以看到绿色包装的宽度是根据3个固定块计算的,这正是我想要的。

但是我想要一个文本,它的宽度不能超过父文本的宽度。

如果您将内容添加到文本div,您可以看到它会增长,并使绿色包装的大小也会增加

Imo有两种解决办法:

使用固定宽度,但这不适合我的需要,我希望大小取决于固定块。
使用宽度为100%、位置相对的文本包装器div从流中输出文本,文本div将具有绝对位置。它可以工作,但在本例中,我需要根据文本包装器的子级计算文本包装器的高度,这是不可能的,因为它超出了流

提前非常感谢您的阅读和帮助,如果我不清楚,请告诉我

2 回复 | 直到 5 年前

Temani Afif 5 年前

一个想法是使用 width:min-content; 与…结合 min-width:100% 但是你应该注意支持 min-content https://developer.mozilla.org/en-US/docs/Web/CSS/width#Browser_compatibility )

.fixed{
  display: inline-block;
  max-width: 5em;
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
}

.wrapper{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgba(0,200, 0, 0.1);
  display:inline-block;
}

p{
  display: inline-block
}

body{
}

.text{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
  width:min-content;
  min-width:calc(100% - 1em);
  box-sizing:border-box;
}

<div class="wrapper">
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="text">
    this long paragraph should not increase the size of the parent but as you can see, it doessdfsdfsfsdfsdfsdf sdf sdf 
  </div>
  
</div>

Awwad 5 年前

如果我能正确理解您的意思,那么您需要将下一行的宽度与上3列的宽度相匹配。

通过考虑边距和填充,可以计算3列(每列5 em)的宽度。我用它作为宽度,你也可以用它作为最大宽度

.fixed{
  display: inline-block;
  max-width: 5em;
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
}

.wrapper{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgba(0,200, 0, 0.1);
  width: fit-content;
}

p{
  display: inline-block
}

body{
}

.text{
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgb(220,220, 220);
  width: 19.5em;
}

<div class="wrapper">
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="fixed">fixed but unknown</div>
  <div class="text">
    this long paragraph should not increase the size of the parent but as you can see, it doessdfsdfsfsdfsdfsdf sdf sdf 
  </div>
  
</div>