Question 405763 in CSS Question posted in
Some basic documentation can be found here.

CSS make an absolute positioned container´s width fit-content of its insides

I want to position a div with dynamic text and dynamic position inside a container. Placing the div is not a problem, but I expected it to adjust its width to its content.

How can I make the green box auto fit its width to the length of the text inside of it?

(Size of the green box shall by dynamic based on the size of the outer box and the font size in the green box shall be dynamic based on the height of that green box.)

I made a jsfiddle for it here: https://jsfiddle.net/pdrasyoj/

<style>

.outerBox {
   container-type: size; 
   width: 400px; 
   height: 400px; 
   border:1px solid green;
   position: relative;
 }

.highlightBox {
  border-radius: 4px;
  background-color: #32db01;
  box-shadow: 2px 2px 3px 0 #000;

  padding: 2.8cqh;
  height: 10cqh;
  width: fit-content;
  min-height: 30px;

  position: absolute;
  bottom: 2.5cqh; 
  right: 2.5cqh;
  container-type: size;
  white-space:nowrap;
}

.dynamicText {
  font-weight: bold;
  font-size: 80cqh;
  line-height: 80cqh;
}

</style>


<div class="outerBox">

<div class="highlightBox">
  <span class="dynamicText">
    dynamic button text
  </span>
</div>

<div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is a solution. The inenr container was not able to receive its height and width from the dynamic text and so it could not inherit it to the inner container that referred to it. The solution was to use the outer container as refrence and adjust the inner containers font-size dynamically based on that outerBox values.

    .outerBox {
   container-type: size; 
   width: 400px; 
   height: 400px; 
   border:1px solid green;
   position: relative;
 }

.highlightBox {
  border-radius: 4px;
  background-color: #32db01;
  box-shadow: 2px 2px 3px 0 #000;

  padding: 2.8cqh;
  height: 10cqh;
  width: fit-content;
  min-height: 30px;

  position: absolute;
  bottom: max(2.5cqh, 5px); 
  right: max(2.5cqh, 5px);
  white-space:nowrap;
}

.dynamicText {
  font-weight: bold;
  font-size: max(8cqh, 20px);
  line-height: max(8cqh, 27px);
}
    <div class="outerBox">

<div class="highlightBox">
  <span class="dynamicText">
    dynamic button text
  </span>
</div>

<div>


  2. 0

    From the documentation on container-type:

    Size containment turns off the ability of an element to get size
    information from its contents, which is important for container
    queries to avoid infinite loops.

    Your code works fine without the container queries.

    .outerBox {
   width: 400px; 
   height: 170px; 
   border: 1px solid green;
   position: relative;
 }

.highlightBox {
  border-radius: 4px;
  background-color: #32db01;
  box-shadow: 2px 2px 3px 0 #000;
  padding: 10px 20px;
  position: absolute;
  bottom: 10px; 
  right: 10px;
  white-space: nowrap;
}

.dynamicText {
  font-weight: bold;
  font-size: 30px;
  line-height: 30px;
}
    <div class="outerBox">
  <div class="highlightBox">
    <span class="dynamicText">
      dynamic button text
    </span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search