Почему сжимается тег div?

Question

Не могу понять почему контейнер сжимается! родителю .item задана конкретная ширина. Задаю дочернем контейнеру .title конкретную ширину в 150px, но соседний блок .content не занимает оставшееся пространство родителя, а почему-то "сжирает" ширину у братского контейнера? вопрос конкртено у этом? что за ерунда?

.contacts{
    display: flex;
    justify-content: space-between;
}
.wrap{
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 50px auto;
    height: 400px;
    background-color: #999999;
    padding: 25px;
}
.list{
    padding: 0;
    /*list-style-type: none;*/
    width: 500px;
    /*height: 100%;*/
    background-color: #E1E1E1;
    display: flex;
    flex-flow: column;
}
.item{
    display: flex;
    width: 100%;
    /*flex-direction: column;*/
    background-color: #daf639;
    margin-bottom: 20px;

}
.title{
    display: inline-block;
    width: 150px;
    background-color: #CC9933;
}
.content{
    display: inline-block;
    background-color:#566135;
}

<div class="wrap">

<div class="contacts">
  <ul class="list">
    <li class="item">
      <div class="title">Address</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut doloribus earum enim eos in magni maxime nemo neque nesciunt, nihil nobis odit quaerat quam quia tenetur ullam veniam voluptates.</div>
    </li>
    <li class="item">
      <div class="title">Telephones</div>
      <div class="content">+7 985 645 89 62</div>
    </li>
  </ul>
</div>

<div class="img">

</div>

Answer 1

Можно задать блоку контент фиксированную ширину

.content{
 display: inline-block;
 background-color:#566135;
 width: 70%;
}

БЛОГ НА HUSL

Почему сжимается тег div?

Ответы (1 шт):