CSS Inline Container width constrained to fit content of specific child elements

Question

I am trying to make a container that is comprised of two elements, in different rows, to match the width of the first element/row and make the content of the second element/row fill the available width and grow in height if needed.

I defined the Markup as:

<div id="container">
  <div id="element-1">Larum Ipsum</div>
  <div id="element-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </div>
</div>

My first attempt was to use an display: inline-grid; and define a max-width: fit-content; on the second element. Which seemed to work (in an outdated version of chrome (102.0.5005.61)):

#container {
  display: inline-grid;
  grid-template-columns: auto;
}

#element-2 {
  max-width: fit-content;
}

My second attempt was to define the container as display: inline-flex; make it wrap and define the second element with a flex basis of 0% and allow it to grow:

#container {
  display: inline-flex;
  flex-wrap: wrap;
}

#element-1 {
  flex: 0 1 100%;
}

#element-2 {
  flex: 1 0 0%;
}

My third attempt was to consult ChatGPT but i may have not been precise enough.

Thanks in advance for any feedback that guides me to the solution to my problem.

CSS Inline Container width constrained to fit content of specific child elements

0 Answers0