Szerokość childa

0

Witam, jak zrobić aby child nie miał szerokości swojego parenta tylko taką jak jego dzieci wystające poza parent? Próbowałem absolute ale parent traci wysokość, jest jakieś sprytne rozwiązanie :)?

<div class="parent">
  <div class="child">
    <p>aaa</p>
    <p>bbb</p>
    <p>ccc</p>
    <p>ddd</p>
    <p>eee</p>
  </div>
</div>

.parent{
  width: 500px;
  padding: 10px;
  background-color: red;
}
.child {
  display: flex;
  background-color: green;
  padding: 10px;
}
p {
  width: 200px;
  flex-shrink: 0;
  background-color: pink;
  border: 1px solid black;
}

https://codepen.io/bodzan/pen/KKMMbdQ?editors=1100

1

display: inline-block dla .child ?

https://jsfiddle.net/doep0cj2/

@ edit
Te paragrafy maja zostać w jednej linii ?

0

Tak w jednej lini mają zostać

1

width: max-content

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0