Issue

This Content is from Stack Overflow. Question asked by m1212

How to make width of div depend on the width of span inside this div? fit-content doesn’t work propperly.

I’ve got this html code:

<div class="bubble">this text is long enouuuugh<span class="inside">content to fit inside box</span></div>
<div class="bubble">this isn't<span class="inside">content to fit inside box</span></div>
<!-- how I want it to look, but not using style="width:110px" -->
<div class="bubble" style="width:110px">ok<span class="inside">content to fit inside box</span></div>

and css:

.bubble {
    float: right;
    clear: right;
    width: fit-content;
    margin: 19px auto;
    border: 2px solid red;
    padding: 10px;
    padding-bottom: 20px;
}
.inside
{
  position: absolute;
  display: block;
  width: fit-content;
  right: 0;
  margin-top: 1px;
  margin-right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: blue;
  background: white;
}

I want it to look like the third box, but not with width:xx px, because the length of black text and blue text varies depending of the box, it’s not equal every time.

Solution

Try the following:

.bubble {
  float: right;
  clear: right;
  width: fit-content;
  margin: 19px auto;
  border: 2px solid red;
  padding: 10px;
  padding-bottom: 20px;
}

.inside {
  display: block;
  width: fit-content;
  right: 0;
  margin-top: 1px;
  margin-right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: blue;
  background: white;
}

<body>

  <div class="bubble">this text is long enouuuugh<span class="inside">content to fit inside box</span></div>
  <div class="bubble">this isn't<span class="inside">content to fit inside box</span></div>
  <!-- how I want it to look, but not using style="width:110px" -->
  <div class="bubble" style="width:110px">ok<span class="inside">content to fit inside box</span></div>
</body>

This Question was asked in StackOverflow by m1212 and Answered by Sutrisno It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.