为什么我的<div>不能自动设置其高度？

我有一个HTML结构如下：

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

My outer div have a min-height but I don't set its height so that it fits whatever inside it. It looks just fine when that <p> has short text, but if I put a long text inside the <p>, the text overflows outside the outer <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;
      }
    }
  }
}

我想不通，也许有人可以帮助我吗？谢谢