Making sibling elements take the same width breaks the text in them

Question

I am trying to set the width of the div, and it\'s content to the width of the paragraph user-title in it. This is the HTML and CSS:

相关标签:

Answer 1

If I'm not totally mistaken here, the only way to make that work cross browsers using CSS is to combine display: inline-block with display: table-row/display: table-caption.

Stack snippet

.panel {
  margin-bottom: 20px;
  display: inline-block;
  box-shadow: 0 2px 4px 0 #C6C2BF;
  padding: 0.5rem 1rem 1rem;
}

.user-title {
  display: table-row;
}

.panel > div {
  display: table-caption;
  caption-side: bottom;
}

<div class="panel">
    <p class="user-title">Date 08.03.2018 User: Joe Doe</p>
    <div>
      <p>Some long text in the paragraph that is wider than the title above it</p>
      <p>Another shorter text</p>
    </div>
</div>

---

If you don't care about IE, then use width: 0; min-width: 100%; on the .parent div.

Note, I tested this with success on Edge v.16, Firefox v.58 and Chrome v.64, but if it works on Safari I can't say.

Stack snippet

.panel {
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #C6C2BF;
    padding: 0.5rem 1rem 1rem;
}

.panel > div {
  width: 0;
  min-width: 100%;
}

<div class="panel">
    <p class="user-title">Date 08.03.2018 User: Joe Doe</p>
    <div>
      <p>Some long text in the paragraph that is wider than the title above it</p>
      <p>Another shorter text</p>
    </div>
</div>

---

Updated

After some trial-and-error, I got this working on both IE11 and Edge/Firefox/Chrome

Stack snippet

.panel {
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #C6C2BF;
    padding: 0.5rem 1rem 1rem;
}

.panel > div {
  width: 0;
  min-width: 100%;
  display: flex;           /*  for IE11  */
  flex-wrap: wrap;         /*  for IE11  */
}

.panel > div > p {
  flex: 100%;              /*  for IE11  */
}

<div class="panel">
    <p class="user-title">Date 08.03.2018 User: Joe Doe</p>
    <div>
      <p>Some long text in the paragraph that is wider than the title above it</p>
      <p>Another shorter text</p>
    </div>
</div>