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>
See Question&Answers more detail:os