Почему мой <div>не устанавливает высоту автоматически?

Question

У меня структура HTML выглядит так:

<div class="act">
  <div>/*left button*/</div>
  <div>
    <p>My very long text goes here</p>
  </div>
  <div>/*right button*/</div>
</div>

Мой внешний div имеет min-height, но я не устанавливаю его height так, чтобы он соответствовал всему, что внутри него. Это выглядит прекрасно, когда этот <p> имеет короткий текст, но если я помещаю длинный текст внутри <p>, текст выходит за пределы внешнего <p>.

Вот мой css (sass) файл

@mixin flexCenter($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.act {
  @include flexCenter(row);
  width: 100%;
  min-height: 2rem;
  border-radius: 2px;
  margin-top: 1rem;
  justify-content: space-between;
  box-shadow: 0px 3px 4px -1px rgba(0,0,0,0.48);
  padding: .5rem;
  cursor: pointer;
  div {
    height: 100%;
    width: 1.35rem;
    height: 2.35rem;
    border-radius: 2px;
    @include flexCenter(row);
    &:nth-child(2) {
      background: inherit;
      width: 100%;
      text-align: center;
      p {
        font-size: .9rem;
      }
    }
  }
}

Не могу разобраться, может кто мне поможет? Спасибо

Answer 1

Вам просто нужно добавить этот

display: block;
height: auto; 

блок кода внутри блока : nth-child (2) , как показано ниже

    &:nth-child(2) {
      background: inherit;
      width: 100%;
      display: block;
      height: auto;
      text-align: center;
      p {
        font-size: .9rem;
      }
    }