CODEWITHSUNDEEP
htmlcssflexbox
Leff
Leff

Reputation: 1298

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

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:

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

.user-title {
  display: flex;
}

.panel>div {
  display: flex;
  flex-direction: column;
}

.panel>div>p {
  display: flex;
  flex-grow: 1;
  width: 0;
}
<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>

That kind of set up makes the elements take the width of the user-title element, but, the text breaks into multiple lines. How can I fix this? This is the fiddle.

Upvotes: 2

Views: 1811

Answers (2)

imkremen
imkremen

Reputation: 84

You can use contain: inline-size; as a more modern solution.

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

.panel > div {
  contain: inline-size;
  overflow-wrap: break-word;
}
<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>
      <p>Loooooooooooooooooooooooooooooooooong</p>
    </div>
</div>

Upvotes: 0

Asons
Asons

Reputation: 87191

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>

Upvotes: 5

Related Questions