Показать flex, выровнять div в нижнем правом углу его контейнера

Question

Мне нужно отобразить желтый div "icon" в правом нижнем углу его красного контейнера "content".

Что не так в моем скрипте?

.root {
    display: inline-flex;
    background-color: red;
}

.content {
    display: flex;
    align-items: centerl;
    justify-content: centerl;
    height: 80px;
    width: 100%;
    background-color: red;
}

.icon {
    position: absolute;
    right: 0;
    bottom:0;
    background-color: yellow;
}

<div class="root">
    <div class="content">
        content
    </div>
    <div class="icon">
      icon
    </div>
</div>

Answer 1

В представленной вами HTML-структуре элемент .icon не является внутри элемента .container.Так что это не может быть связано с этим.Если вы измените структуру и дадите элемент .container position: relative, он будет работать.

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
  position: relative;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}

<div class="root">
  <div class="content">
    content
    <div class="icon">
      icon
    </div>
  </div>
</div>

Answer 2

Вместо позиции вы можете использовать гибкое конечное свойство align-self: flex-end;

, см. Фрагмент кода:

.root {
  display: inline-flex;
  background-color: red;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
   align-self: flex-end;
   background-color: yellow;
}

<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

Answer 3

.root {
  display: inline-flex;
  background-color: red;
  position: relative;
}

.content {
  display: flex;
  align-items: centerl;
  justify-content: centerl;
  height: 80px;
  width: 100%;
  background-color: red;
}

.icon {
  position: absolute;
  right: 0;
  bottom:0;
  background-color: yellow;
}

<div class="root">
  <div class="content">
    content
  </div>
  <div class="icon">
    icon
  </div>
</div>

добавить элемент .root

position: relative;