未设置高度时 CSS 文本溢出填充

Question

我在尝试使用overflow: hidden 填充带有两个子 div 的 div 时遇到问题，如果父级没有设置高度，则内容会溢出填充的底部，尽管设置了最大高度.最重要的是，在子 div 上使用overflow: hidden 会使其表现得像display: inline-block，其中内容不会围绕其兄弟float: left 流动。下面是我的例子。

Descriptive picture of example case

所以我的两个主要问题是，有没有办法实现 子 div (.content) 增长直到它达到父级的最大高度 而不会超调，主要是让子 div会被父母的填充物隐藏吗？ .content 上的overflow: hidden 应该会导致 .content 在文本换行时表现异常还是这是一个错误？

.wrapper {
  max-height: 150px;
  /* height: 150px; /* Required for .content to get correct height. Why isn't max-height sufficient? */
  overflow: hidden;
  padding: 25px;
  border: 1px solid #000;
}

.left {
  float: left;
  border: 1px solid #000;
}

.content {
  /* height: 100%; /* Doesn't do anything if the parent has no height set. */
  max-height: 150px; /* Resolves not being able to inherit the parent's height. */
  overflow: hidden; /* <- Required to hide overflow text but causes odd text wrapping behavior. */
}

<div class="wrapper">
  <div class="left">
  Left
  </div>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
  </div>
</div>

编辑：

我意识到我可以将最大高度数量移动到子 div，但由于 overflow: hidden 规则，文本仍然奇怪地换行。我想相信这是一个错误，但我不确定。

Answer 1

试试这个：

.wrapper {
  overflow: auto;
  padding: 25px;
  border: 1px solid #000;
}

.left {
  float: left;
  border: 1px solid #000;
}

.content {
  display: block;
  overflow: auto;
 /* Required but causes inline-block behavior? */
}
::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

<div class="wrapper">
  <div class="left">
  Left
  </div>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
  </div>
</div>

Answer 2

    .wrapper {
      max-height: 150px;
      height: 150px; /* Required for .block to get correct height. Why isn't max-height sufficient? */
      overflow: hidden;
      padding: 25px 25px 0; /*use this padding values remove bottom value*/
      border: 1px solid #000;
    }

    .left {
      float: left;
      border: 1px solid #000;
    }

    .content {
      height: 100%;
      overflow: hidden; /*according to your requirements Remve overflow: hidden */
    }
according to your requirements Remove `overflow: hidden` from content

    <div class="wrapper">
      <div class="left">
      Left
      </div>
      <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam quam sit amet neque ullamcorper varius. Aliquam porta, nulla a accumsan laoreet, ipsum nibh rhoncus lectus, sit amet placerat nibh felis ut leo. Nam in turpis at felis rutrum euismod a a sem. Donec efficitur lorem non vehicula luctus. Nulla pulvinar ultrices blandit. Donec ipsum arcu, tempus nec vulputate quis, porta nec sapien. Curabitur pellentesque, felis ut suscipit sodales, risus arcu consequat odio, vel porta ligula leo et quam. Praesent quam nisi, eleifend non viverra non, molestie nec nulla. Curabitur vel scelerisque dui, facilisis tempus enim. Etiam ac scelerisque dui. Etiam pretium tortor ac dictum eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ornare malesuada risus, sed iaculis tellus lacinia vitae. Vivamus ut rhoncus nisl. Pellentesque vel sapien diam. Duis id felis massa. 
      </div>
    </div>