CSS - Сделать div ширину контента (div-inline-flex)

Question

У меня есть следующий код:

HTML:

<div class="log">

  <div class="entry">
    <img class="icon" src="https://apixel.me/static/apixel.png" />
    <p class="text">
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
    </p>
  </div>

</div>

CSS:

.log {
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%, 0);
    border: thin red solid;
}

.entry {
    display: inline-flex;
    height: 25px;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 20px;
    margin-top: 10px;
    border: thin orange solid;
}

.icon {
    display: inline-block;
    width: 25px;
    height: auto;
}

.text {
    display: inline-block;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 15px;
    white-space: nowrap;
    margin: auto;
    margin-left: 15px;
}

.bullet {
    color: #a1a1a1;
    margin-left: 10px;
    margin-right: 10px;
}

JSFiddle demo

В демонстрации JSFiddle, если вы измените размер результата, чтобы он стал достаточно широким, div с красной рамкой больше не был размером его содержимого. Что вызывает это странное поведение и как я могу это исправить?

Answer 1

Попробуйте изменить .entry {display: inline-flex; на .entry {display: flex;

Answer 2

Вы можете исправить это, добавив этот CSS width: min-content; в log класс. JS Fiddle Link

.log {
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%, 0);
    border: thin red solid;
    width: min-content;/*Add this line*/
}

.entry {
    display: inline-flex;
    height: 25px;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 20px;
    margin-top: 10px;
    border: thin orange solid;
}

.icon {
    display: inline-block;
    width: 25px;
    height: auto;
}

.text {
    display: inline-block;
    color: #2e2e2e;
    font-family: "Roboto";
    font-size: 15px;
    white-space: nowrap;
    margin: auto;
    margin-left: 15px;
}

.bullet {
    color: #a1a1a1;
    margin-left: 10px;
    margin-right: 10px;
}

<div class="log">

  <div class="entry">
    <img class="icon" src="https://apixel.me/static/apixel.png" />
    <p class="text">
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
      <span class="bullet">•</span>
      filler text
    </p>
  </div>

</div>