Ширина: 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%, ваш дочерний элемент будет сжиматься, чтобы соответствовать, потому что вы не указываете его родителю 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>