Specify the element that determines the max width in a flex row container

Question

I have a flex container with flex-direction: column and two child elements. The contents of both children are dynamic, so their sizes / widths can vary. Now I want to sepcify that only the second element can determine the max width. So only the second elment can "grow" in width. The first element should only grow to the width of the second child. How can I accomplish this?

Below is an example of the situation. In the example the width is determined by the first element since it has more content inside. But how can I say that the width is determined by the second element and the first just "fits" to the width?

<div class="container">
  <div class="first">
  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 class="second">
    <ul>
      <li>First item (with some information)</li>
      <li>Second item (with some information)</li>
      <li>Third item</li>
    </ul>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

score 0 · Accepted Answer · answered Feb 24 '23 at 13:08

Use min-width. Min-width overrides width as explained on css-tricks. We use width: min-content to shrink the width to the narrowest it can be to accomodate the text then use min-width: 100% to override it and make it the width of the container. By shrinking down the first div, it means that the 2nd controls the overall width of the flex container.

Note: I've also changed the display: flex to display:inline-flex.

.container {
  display: inline-flex;
  flex-direction: column;
  outline: 1px solid blue;
}

.container>div {
  outline: 1px solid red;
}

.first {
  width: min-content;
  min-width: 100%;
}

<div class="container">
  <div class="first">
    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 class="second">
    <ul>
      <li>First item (with some information)</li>
      <li>Second item (with some information)</li>
      <li>Third item</li>
    </ul>
  </div>
</div>

Specify the element that determines the max width in a flex row container

1 Answers1