CSS Flexbox: Same width as its content

Question

See my code snippet below. I want the text-wrapper <div> to be only as wide as its content. Not as wide as the parent fixed-width <div>.

It works as long as the content is not wrapped. But as soon as it is wrapped it is always as wide as the parent container.

How can I achieve that?

.fixed-width {
  width: 800px;
  display: flex;
}
.text-wrapper {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}
.text-wrapper>div {
  border: 1px dashed black;
}

<div class="fixed-width">
  <div class="text-wrapper">
    <div>
      Bavaria ipsum dolor sit amet Schdeckalfisch
    </div>
    <div>
      abfieseln so schee wea ko, dea ko. 
    </div>
    <div>
      Kuaschwanz i waar soweid des is schee umma Milli pfiad de Guglhupf, gwiss Mamalad.
    </div>
  </div>
</div>

It does not work. Then it will grow bigger than the parent fixed-width container. — Sebi, Apr 14 '23 at 09:28
Does this answer: [Make container shrink-to-fit child elements as they wrap](https://stackoverflow.com/a/37413580/12571484) help? — Adam, Apr 14 '23 at 09:31

imhvost · Answer 1 · 2023-04-14T11:09:16.283

Here's a trick you can do (now max-width .fixed-width = max-width of largest .text-wrapper>div):

.fixed-width {
  width: 800px;
  display: flex;
}
.text-wrapper {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  /*  */
  flex-basis: min-content;
  max-width: 100%;
}
.text-wrapper>div {
  border: 1px dashed black;
  /*  */
  width: max-content;
}

<div class="fixed-width">
  <div class="text-wrapper">
    <div>
      Bavaria ipsum dolor sit amet Schdeckalfisch
    </div>
    <div>
      abfieseln so schee wea ko, dea ko. 
    </div>
    <div>
      Kuaschwanz i waar soweid des is schee umma Milli pfiad de Guglhupf, gwiss Mamalad.
    </div>
  </div>
</div>

I am also adding a javascript solution if it is appropriate in this case:

setWidth();
window.onresize = setWidth;

function setWidth(){
  document.querySelectorAll('.text-wrapper').forEach(textWrapper => {
    textWrapper.style.removeProperty('width');
    const wrapper = textWrapper.closest('.fixed-width')
    const wrapperStyles = getComputedStyle(wrapper);
    const fixedWidth = parseFloat( wrapperStyles.width ) - parseFloat( wrapperStyles.paddingLeft ) - parseFloat( wrapperStyles.paddingRight ) - parseFloat( wrapperStyles.borderLeftWidth ) - parseFloat( wrapperStyles.borderRightWidth );
    const childsWidth = {
      max: 0,
      amount: 0
    };
    for (const div of textWrapper.children) {
      const styles = getComputedStyle(div);
      const divWidth = parseFloat(styles.width) + parseFloat( styles.marginLeft ) + parseFloat( styles.marginRight );
      if (childsWidth.max < divWidth) {
        childsWidth.max = divWidth;
      }
      childsWidth.amount += divWidth;
    }
    if ( childsWidth.amount > fixedWidth ) {
      textWrapper.style.width = childsWidth.max + 'px';
    }
  })
}

* {
  box-sizing: border-box;
}
.fixed-width {
  width: 800px;
  display: flex;
  max-width:100%;
}
.text-wrapper {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}
.text-wrapper>div {
  border: 1px dashed black;
}

<div class="fixed-width">
  <div class="text-wrapper">
    <div>
      Bavaria ipsum dolor sit amet Schdeckalfisch
    </div>
    <div>
      abfieseln so schee wea ko, dea ko. 
    </div>
    <div>
      Kuaschwanz i waar soweid des is schee umma Milli pfiad de Guglhupf, gwiss Mamalad.
    </div>
  </div>
</div>

If I set the width on `.fixed-width` to a large value, the elements don't reflow on to one line?? (see this [codepen](https://codepen.io/adamuk73/pen/PoyZvYw)) — Adam, Apr 14 '23 at 09:55
It is so... Now width `.fixed-width` = max-width `.text-wrapper>div`. Would a javascript solution be appropriate? — imhvost, Apr 14 '23 at 10:30
Thank you - I did not know about `min-content` and `max-content`. But as Adam said, it now also wraps if there would be enough space on one line. Not sure if I want a JS solution :-) — Sebi, Apr 14 '23 at 11:34

CSS Flexbox: Same width as its content

1 Answers1