html - div 不会为 float 内容扩展高度

Question

这个问题已经被问了很多，我已经看了他们所有的(貌似)。我有一个 div，其中包含一些不会扩展到内容大小的 float 内容。我已经添加了 clear:both(实际上是每一行，它有效果，但没有解决它)，并且我已经尝试了 overflow:hidden 的每一个排列> 或 overflow:auto 几乎在此处的每个元素上。为了更好地衡量，我还尝试将 div 更改为跨度。

无论我做什么，如果您使窗口足够细，最终按钮就会落在 div 区域下方。为什么以及如何修复它？

JSFiddle

.confirmation-modal {
    z-index: 1; /* Sit on top */
    width: 100%; /* Full width */
    height: 4rem;
    max-height:18rem;
    overflow: auto;
    text-align: center;
    border-radius:5px;
    
}


.confirmation-raised-panel{
    background-color: #ffed83;
    padding: 0px;
    text-align: center;
    height: 4rem; /* Full height */
    max-height:18rem;    
        overflow: auto;
}

.buttons{
  float:right;
}

.confirmation-message {
    overflow: auto;
  margin: 20px 0 0 30px;
  font-size: 1.2rem;
  font-weight: 400;
  float:left;
}

.clear{
  clear:both;
}

<div class="confirmation-modal">
    <div class="confirmation-raised-panel">
        <div class="confirmation-message">
            This is a big message that takes up a bunch of space.  Yes indeed.  Do you like it?
        </div>
        <div>
            <div class="buttons">        
                <button>Yes, I'm Sure</button>
                <button>Cancel</button>
            </div>
                <br class="clear"/>    
        </div>
    </div>
</div>

Answer 1

好吧，你在外面的两个容器中有 height: 4rem; - 这可以防止它们变得更高。删除它或设置 min-height，一切就绪:

.confirmation-modal {
  z-index: 1;
  /* Sit on top */
  width: 100%;
  /* Full width */
  min-height: 4rem;
  max-height: 18rem;
  overflow: auto;
  text-align: center;
  border-radius: 5px;
}

.confirmation-raised-panel {
  background-color: #ffed83;
  padding: 0px;
  text-align: center;
  min-height: 4rem;
  max-height: 18rem;
  overflow: auto;
}

.buttons {
  float: right;
}

.confirmation-message {
  overflow: auto;
  margin: 20px 0 0 30px;
  font-size: 1.2rem;
  font-weight: 400;
  float: left;
}

.clear {
  clear: both;
}

<div class="confirmation-modal">
  <div class="confirmation-raised-panel">
    <div class="confirmation-message">
      This is a big message that takes up a bunch of space. Yes indeed. Do you like it?
    </div>
    <div>
      <div class="buttons">
        <button>Yes, I'm Sure</button>
        <button>Cancel</button>
      </div>
      <br class="clear" />
    </div>
  </div>
</div>