1

I have a fixed-position container element with two children. Both children contain text. I want one of the children to dynamically set the width of the container with its content. I want the other child's text to wrap appropriate based on that width.

For example:

.container {
  position: fixed;
}

.wrap {
  background: red;
}

.stretch {
  background: green;
}
<div class="container">
  <div class="wrap">
    this text is very very long
  </div>
  <div class="stretch">
    shorter text
  <div>
</div>

In this example, I would like the container's width to match the shorter green .stretch div. I want the red .wrap div to have the same width, with the text wrapped inside, like:

r

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
David Y. Stephenson
  • 872
  • 4
  • 22
  • 44
  • Just for clarifying, what does this problem have to do with the `fixed position`? or it's only about the parent's width depends on 1 specific child's width? – Loi Nguyen Huynh Jan 01 '20 at 13:04
  • 1
    I'm not certain how relevant it is. If the position is not fixed, the div always stretches to the full page width, so the wrapping might not occur. In any case, I know the target div is fixed, so I wanted to make sure answers were compatible. – David Y. Stephenson Jan 01 '20 at 13:15
  • 1
    `width: 0; min-width: 100%;` on the red element – Temani Afif Jan 01 '20 at 13:32

1 Answers1

2

The solution's come up with me was:

  • The child div needs to stretch its width depends on its content -> max-content
  • The parents's width needs to be as shrink as possible depends on its content -> min-content

The solution code with variant bahaviors: 

.container {
  width: min-content;
  
  border: 2px solid blue;
  margin: 5px;
}

.wrap {
  background: red;
  width: auto; /* default btw */
}

.stretch {
  background: green;
  width: max-content;
}
<div class="container">
  <div class="wrap">
    this text is very very long
  </div>
  <div class="stretch">
    shorter text
  </div>
</div>

<div class="container">
  <div class="wrap">
    shorter
  </div>
  <div class="stretch">
    shorter text
  </div>
</div>

<div class="container">
  <span class="wrap">
    shorter
  </span>
  <div class="stretch">
    shorter text
  </div>
</div>

You can read more about min-content and max-content from this answer or the specification.

  • max-content inline size: the narrowest inline size it could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.

  • min-content inline size: the narrowest inline size a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger inline size. Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

Community
  • 1
  • 1
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
  • 1
    Very clever. Good answer – Paulie_D Jan 01 '20 at 12:51
  • @Paulie_D Thank you! It happens to do what the OP wants but your compliment gives me a guilty feeling that I do not fully understand why it works and what are the other solutions and whether they're better. I'll do some research about this anyway, and update the answer as I can :p. – Loi Nguyen Huynh Jan 01 '20 at 13:00
  • 2
    width:100% on the wrap is not needed and you can replace width:max-content by `white-space:nowrap` – Temani Afif Jan 01 '20 at 13:33
  • 2
    for the explanation: min-content force the wrapper to consider the minimum width considering all the possible line break (basically the tallest word on both divs) then max-content will avoid the green one to wrap and will reset the min-content of the parent to its width – Temani Afif Jan 01 '20 at 13:34