Question

当尝试使用overflow: hidden填充两个子div的div时遇到问题，如果父对象没有设置高度，尽管max-height，内容也会超出填充的底部被设置。最重要的是，在子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>

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

2 个答案: