为什么我的 <div> 没有自动设置它的高度？答案

【问题标题】：Why does my <div> does not automatically set its height?为什么我的 <div> 没有自动设置它的高度？
【发布时间】：2020-08-25 03:22:59
【问题描述】：

我的 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;
      }
    }
  }
}

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

【问题讨论】：

嘿，想帮助你，但我没有完全理解这个问题。你能创建一个代码片段（编辑器中的按钮）吗？
感谢@webwelten，我尝试添加display: block; height: auto，它对我有用

标签： javascript html css reactjs sass

【解决方案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;
      }
    }

【讨论】：