浮箱100%集装箱箱

Question

我有一个框设置为float:right；在一个容器框内。这个集装箱箱还会有其他内容。

我正在尝试垂直居中内框内的文本。为此，我将display:flex；与align-items:center；一起使用。

作为最后一步，我现在希望高度总是充满集装箱箱。以便此内框内垂直居中的文本始终垂直居中于容器框内。

>

容器框的高度会根据其内容进行调整，因此我无法在CSS中设置框的特定高度。

对于内框上的高度：100%；也没有帮助。

我怎样才能使这个内箱始终100%垂直地充满它的集装箱箱？

这里有一个示例代码段：内框和容器框都将始终保留100 px的最小高度，但我添加了这么多文本，以至于容器框扩展到100 px以上。很明显，内盒没有调整它的高度以适应这一点。

null

#container {
  background-color:#ddd;
  min-height: 100px;
}

#centeredcontent {
  display: flex;
  align-items: center;
  background-color: #eee; 
  float: right;
  width: 30%;
  height: 100%;
  min-height: 100px;
}

<div id="container">
  <div id="centeredcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
</div>

null

Answer 1

这里不需要浮点：

null

#container {
  background-color:#ddd;
  min-height: 100px;
  display:grid; /* grid container */
  grid-template-columns:auto 30%; /* 2 columns */
  grid-auto-flow:dense; /* this will make sure the text fill the first column */
}

#centeredcontent {
  display: flex;
  align-items: center;
  background-color: #eee; 
  grid-column: 2; /* your float element on the second column */
}

<div id="container">
  <div id="centeredcontent"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></div>
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </div>