宽度：100％不适用于子框

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％，但是它的父伸缩方向是row，并且没有告诉孩子溢出时要换行。这就是为什么您需要弹性包装。

Answer 2

如果我正确地提出了您的问题，则问题在于您的Div标签关闭了，您正在同一行上打开和关闭它。

请注意

<div class='img-window'></div>

这可能应该解决

* {
  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 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>
</div>