fit-content

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2021å¹´11æâ©.

fit-content å³é®åç¸å½äº fit-content(stretch)ãå¨å®éåºç¨ä¸ï¼è¿æå³ççåä¼ä½¿ç¨å¯ç¨ç©ºé´ï¼ä½ç»ä¸ä¼è¶è¿ max-contentã

å½ç¨ä½ widthãheightãmin-widthãmin-heightãmax-width å max-height çå¸å±çåå°ºå¯¸æ¶ï¼æå¤§åæå°å°ºå¯¸æçæ¯åå®¹å°ºå¯¸ã

å¯ä»¥ä½¿ç¨ interpolate-size å±æ§å calc-size() å½æ°æ¥å¯ç¨ç± fit-content å¼å§æç»æçå¨ç»ã

è¯æ³

css

width: fit-content;
block-size: fit-content;

ç¤ºä¾

ä½¿ç¨ fit-content è°æ´çåå¤§å°

HTML

html

<div class="container">
  <div class="item">é¡¹ç®</div>
  <div class="item">é¡¹ç®ä¸åå«æ´å¤ææ¬ã</div>
  <div class="item">
    é¡¹ç®ä¸åå«æ´å¤ææ¬ï¼å¸ææä»¬å·²ç»æ·»å äºè¶³å¤çææ¬ï¼ä»¥ä¾¿ææ¬å¼å§æ¢è¡ã
  </div>
</div>

CSS

css

.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}