如何让子div填充父元素剩余宽度？卡片布局异常排查

问题出在这几个地方： #

• 图片容器溢出：card-image-content 设置了 width:160px，但父容器 card-image-container 是150px宽，直接导致图片区域超出容器，破坏整体布局。
• 右侧信息容器宽度分配错误：card-info-container 用了 flex-basis:70%，这会强制它占70%宽度，没法自动填充卡片的剩余空间，不符合需求。
• 底部元素定位方式不合理：用绝对定位来放置 card-info-count 和 card-info-price，不仅没法利用flex布局的自适应优势，还容易出现排版错位（比如右下角的边框异常）。

修复后的代码： #

CSS 部分

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  margin: 2rem;
}

.card {
  display: flex;
  margin: 1rem auto;
  background: #fff;
  font-family: Chivo, sans-serif;
  border-radius: 5px;
  overflow: hidden;
  height: 150px;
  border: 1px solid #000000;
  max-width: 600px;
  width: 100%;
  cursor: pointer;
}

.card:hover {
  box-shadow: 3px 3px 0px 0px #222222;
  transition: box-shadow 0.3s ease-out;
}

.card .card-image-container {
  position: relative;
  background-color: #000000;
  width: 150px; /* 固定150px正方形 */
  height: 150px;
}

.card .card-image-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  /* 去掉width:160px，用绝对定位占满父容器 */
}

.card .card-info-container {
  background: #fff;
  border-left: 1px solid #000000;
  display: flex;
  flex-direction: column; /* 垂直排列标题和底部区域 */
  flex-grow: 1; /* 填充卡片剩余宽度 */
}

.card .card-info-container .card-info-title {
  line-height: 1;
  margin: 0;
  font-size: 1.1rem;
  padding: 10px;
  flex-grow: 1; /* 标题区域占满剩余高度 */
}

/* 底部容器，用flex排列count和price */
.card-info-bottom {
  display: flex;
  border-top: 1px solid #000000;
}

.card-info-count {
  padding: 10px;
  flex-grow: 1; /* 填充剩余宽度 */
}

.card-info-price {
  width: 80px;
  padding: 10px;
  border-left: 1px solid #000000;
}

HTML 部分

<div class="card">
  <div class="card-image-container">
    <div class="card-image-content" style="background-image: url(https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg)"></div>
  </div>

  <div class="card-info-container">
    <div class="card-info-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <!-- 添加底部容器，用flex布局 -->
    <div class="card-info-bottom">
      <div class="card-info-count">12 views</div>
      <div class="card-info-price">50 EUR</div>
    </div>
  </div>
</div>

修复说明： #

1. 把 card-image-container 直接设为150px宽高，确保是正方形；去掉 card-image-content 的width属性，用绝对定位自动占满父容器，避免溢出。
2. card-info-container 改用 flex-grow:1，这样就能自动填充卡片的剩余宽度，不再受固定百分比限制。
3. 新增 card-info-bottom 容器，用flex布局来管理底部的浏览量和价格：card-info-count 设为 flex-grow:1 填充剩余宽度，card-info-price 固定80px宽，这样排版更稳定，边框也不会出现异常。

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