CSS-使内容的div宽度（inline-flex div）

Question

I have the following code:

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

In the JSFiddle demo, if you resize the result to be wide enough, the div with the red border is no longer the size of its content. What's causing this strange behavior and how can I fix it?

Answer 1

Try changing the .entry {display: inline-flex; to .entry {display: flex;

Answer 2

You can fix this by adding this CSS width: min-content; in log class. 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>