当其内容绝对放置时如何使div宽度增加

Question

我有一个div，其中有一个文本，该文本的副标题必须始终以这种方式位于右下角

我通过使父div相对和其中的内容为绝对来实现此目的，但是上部文本可以增长到任意长度，我希望父div随其扩展而不覆盖其正在执行的其他元素在图片中

这是我尝试过的。

header {
height: 60px;
padding: 0 12px;
background: #fff;
position: fixed;
width: calc(100% - 24px);
z-index: 999999; // no z-index values above this for any body elements
box-shadow: 7px -9px 6px 6px $black;
left: 0;
li {
    float: right;
    display: block;
    margin-left: 20px;
    padding: 20px 0;
    width: 18px;
    text-align: right;
    i {
        color: $icon-grey;
        font-size: $header-icon-size;
        cursor: pointer;
        &.fa-times {
            color: $icon-red;
        }
        &.notify{
            color: gold;
        }
        &.fa-caret-down{
            color: gold;
        }
    }
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top: -0.7em;
        object-fit: cover;
        object-position: center right;
    }
}
.user-info {
    text-align: right;
    display: inline-block;
    margin-top: -0.5em;
    h5{
        color: $section;
    }
    span{
        color: $icon-grey;
        font-size: 14px;
    }

  }
  .user-details{
      margin-right: 15px;
  }
}

<header>
  <li>
    <i class="fas fa-caret-down"></i>
  </li>

  <li>
    <img src="{{user.image}}">
  </li>
  <li>
    <div class="user-info">
      <h4>Smith</h4>
      <p>CAD</p>
    </div>
  </li>

  <li class="notification-menu">
    <i class="fas fa-bell"></i>
  </li>
</header>

标题内的所有元素都在右侧对齐。 我找不到任何仅使用CSS的解决方案。

Answer 1

只需使用text-align:right ...似乎就足够了。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.user-info {
  text-align: right;
  display: inline-block;
  border: 1px solid grey;
}

<div class="user-info">
  <h4>Smith</h4>
  <p>CAD</p>
</div>

<div class="user-info">
  <h4>Longer name - Smith</h4>
  <p>CAD</p>
</div>

<div class="user-info">
  <h4>Smith</h4>
  <p>Longer Initials CAD</p>
</div>