Div无法自适应父元素高度求助：如何让红色边框容器与图片等高

这问题我太懂了！原来的float布局下，height:100%没法生效，因为浮动元素脱离了文档流，父容器的高度完全由图片撑开，红色边框的.the-details找不到正确的高度参照。换成Flexbox布局就能完美解决这个问题，而且改动非常小：

关键样式修改： #

1. 把父容器.the-window的布局从float改成flex：

   .the-window {
     width: 100%;
     display: flex; /* 核心改动：启用flex布局 */
     box-sizing: border-box;
   }
   

2. 移除.the-image的float: left，改用flex属性固定宽度：

   .the-image {
     /* float: left; 移除这个 */
     flex: 0 0 45%; /* 固定宽度45%，不缩放 */
     background-size: cover !important;
     background-position: center center !important;
     background: pink;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-right: none;
   }
   

3. 修改.the-details，移除固定高度，让它自动填充剩余空间并等高：

   .the-details {
     /* float: left; 移除这个 */
     /* height: 80px; 移除固定高度 */
     flex: 1; /* 占满剩余的55%宽度，自动和左边容器等高 */
     box-sizing: border-box;
     border: 1px solid red;
     padding: 10px;
     overflow: hidden;
   }
   

修改后的完整代码： #

<style>
.the-window { width: 100%; display: flex; box-sizing: border-box; }
.the-image img { display: block; width: 100%; height: auto; margin: 0; }
.the-image { flex: 0 0 45%; background-size: cover !important; background-position: center center !important; background: pink; box-sizing: border-box; border: 1px solid #ccc; border-right: none; }
.the-details { flex: 1; box-sizing: border-box; border: 1px solid red; padding: 10px; overflow: hidden; }
.the-header { padding: 0; font-size: 14px; color: #333; }
</style>
<div class="the-window">
  <a href="#">
    <div class="the-image" style="background:url('#')">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
    </div>
  </a>
  <div class="the-details">
    <h4 class="the-header"><a href="#">Some text will be going in here</a></h4>
  </div>
</div>

原理说明： #

Flexbox布局会让容器内的子元素默认等高对齐，不管内容多少。.the-image用flex: 0 0 45%固定了宽度，.the-details用flex:1自动占据剩下的空间，这样两者就会始终保持和图片一样的高度，完美适配3:2比例的图片容器。

内容的提问来源于stack exchange，提问作者user8758206