隐式宽度过渡

Question

隐式宽度（即向包含文本的元素添加填充，以便为父容器提供特定的隐式宽度）是一件美妙的事情。然而，这显然会给过渡带来一些复杂性。任何人都可以想出任何方法来创建像下面 CodePen 链接中的过渡而不使用显式宽度的过渡吗？

<div id='has-implicit-width'>
  <div class='text-element'>Some Text That Always Varies in Length</div>
</div>

.text-element {
  padding: 12px;
}

https://codepen.io/julienfontaine/pen/yJxQmK

Answer 1

现在可以使用 CSS 网格来完成此操作。感谢Moob。

#parent {
  display: grid;
  grid-template-rows: min-content 0fr;
  transition: grid-template-rows 500ms;
}

#parent:hover {
  grid-template-rows: min-content 1fr;
}

#child {   
  background-color: #dedede;
  overflow: hidden;
}

<div>OTHER EL</div>
<div id="parent">
  <div>Hover me</div>
  <div id="child">
    <div>Some content</div>
    <div>Some content</div>
    Some content
    <br>Some content
    <br>Some content
  </div>
</div>
<div>OTHER EL</div>