html - 宽度 : 100% is not applied to child box properly

Question

背景

我做了一个简单的卡片布局。

* {
  box-sizing: border-box;
}
.card {
  display: flex;
  width: 600px;
  height: 400px;
}
.card > .img-window {
  width: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/169950/photo-1470020337050-543c4e581988.jpg');
  background-position: center;
  background-size: cover;
}
.card > .content {
  color: white;
  background-color: rgb(82, 113, 121);
}

<div class='card'>
  <div class='img-window'></div>
  <div class='content'>
    <h1>Main Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
  </div>
</div>

问题

.card > .img-window {
  width: 100%;
}

我应用了 width: 100% 但它没有像我预期的那样工作。 .img-window 框可能只占整个宽度的 40%。

1. 为什么不是 100%？
2. 什么计算应用于.img-window 框？在这种情况下，浏览器如何计算 100%？

Answer 1

问题是您缺少 flex-wrap。即使您将图像 width 设置为 100%，您的 flex 子级也会缩小以适合，因为您没有告诉其父级 wrap。看看CSS技巧文章:https://css-tricks.com/almanac/properties/f/flex-wrap/

这是我的代码，flex-wrap: wrap; 到 .card

* {
  box-sizing: border-box;
}
.card {
  display: flex;
  width: 600px;
  height: 400px;
  flex-wrap: wrap;
}
.card > .img-window {
  width: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/169950/photo-1470020337050-543c4e581988.jpg');
  background-position: center;
  background-size: cover;
}
.card > .content {
  color: white;
  background-color: rgb(82, 113, 121);
}

<div class='card'>
  <div class='img-window'></div>
  <div class='content'>
    <h1>Main Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
  </div>
</div>

编辑:

它是 100%，但它的父 flex 方向是 row，并且没有告诉 child 溢出时换行。这就是您需要 flex-wrap 的原因。