0

I would like to set the width of the div, and it's content by the width of one of the paragraphs in it. This is the html structure:

<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>

Currently I have the styling set up like this for the .panel:

.panel {
    width: 20rem;
    display: flex;
    flex-direction: column;
    flex: 0 1 270px;
}

The problem I have is that the text inside the paragraph tags with the class .user-title, breaks to another line in Chrome, and Edge, and not in IE. I would like to keep the text in the same line, and that everything else takes the width of that text.

I have tried with setting the .panel to:

width: auto;
height: auto;
display: inline-flex;
flex-direction: column;
flex: 0 1 auto;
position: relative;

And the child div to:

position: absolute;
width: 100%;
top: 30px;

Then, the .panel and the child div, take the width of the paragraph inside of it. But, the child element goes out of the bounderis of the panel element in it's height, the panel is not covering the height of both the paragraph and the child div.

This is the fiddle. How can I fix that?

Leff
  • 1,968
  • 24
  • 97
  • 201
  • None of the examples provided marked as duplicate match my question exactly. First case has the height and not width as a requirement, second has the set width of the child div, while mine doesn't. – Leff Mar 08 '18 at 13:22
  • 1
    @TemaniAfif I changed the dupe links to an answer of mine, that does this w/o using position absolute, which in this case can't be used as it affect the content flow. – Asons Mar 09 '18 at 13:40
  • @LGSon sure but i think it's better that this question get deleted since the dup is in the futur and it's the same question. – Temani Afif Mar 09 '18 at 13:47
  • @TemaniAfif I have written this new question, which is now given as an example of a duplicate, since this one was marked as a duplicate of other questions, which didn't give me the answer I was looking for. Thankfully, I got an answer that I was looking for in the new one. Which I guess I could have gotten already in this one, if it wasn't marked as a duplicate before. In any case it can be closed now. – Leff Mar 09 '18 at 13:57
  • and when a duplicate is not suitable you can alert the person how marked the question and the question can be reopened, but you didn't do so ... if you don't use @ i don't get any notification and for me you are satisfied with the answers – Temani Afif Mar 09 '18 at 14:02
  • @TemaniAfif Sorry about that, I have assumed that you have got a notification about my comment. – Leff Mar 09 '18 at 14:09
  • @TemaniAfif It is for the OP to decide whether they want to delete this or not, though I agree, it has served its purpose and could be deleted. – Asons Mar 09 '18 at 14:43
  • Unfortunately, I can't delete this question, since it has already got an answer. – Leff Mar 09 '18 at 14:55

1 Answers1

-1

You can do this by using display:table, it will take the width of the panel according to its contents.

.panel {
    display: table;
}
Biswajit
  • 978
  • 3
  • 11
  • 30