Can a CSS @container query work based on dynamic content height?

Question

I'm trying to change styles of a popup when it is forced above a certain height by its content. I can do this with JS but I'm exploring the new CSS @container queries to make it work.

In the example below, I can make the bold tag turn red by adding an explicit height of 50px onto the container. This is good, but I expected this to happen dynamically based on the height of the content. Is this possible? What's the purpose of container queries if not this?

Secondly, I want the container background to automatically turn yellow when the longer content is loaded. This does not seem to be possible. Is there any way to restyle the container itself within a container query?

//Toggles between long and short content in the div:
var i=1
setInterval(function(){
  document.getElementById('container').innerHTML = i ? "Lorem ipsum dolor sit amet. Vel nihil optio est dolor earum non explicabo ducimus. Qui fuga sunt quo nemo veritatis ad eaque animi. Id quis quisquam et sequi repudiandae ea deserunt vero sed aliquam eligendi non culpa quos. Vel vitae impedit aut corrupti quisquam ab molestias veritatis qui earum odio! Sit quaerat dolores 33 omnis laboriosam est labore quod." : "Short <b>content</b>"
  i=!i
},1000)

#container{ 
  background:#DDD; 
  padding:50px; 
  border-radius:500px; 
  width:300px;
  container: pillPop / size;
}

@container pillPop (min-height: 50px){
    #container{background:yellow;}
    b{color:red}
}

<div id='container'> Short <b>content</b> </div>