3

I'm having problems getting the correct width of a flex div with absolute position. In this flex div there's a list that goes down (flex-direction: column) and wraps when it gets to the bottom of the div, which has a maximum height.

This is the MCVE, as you can see the background of the div doesn't fit its content. Inspecting the element also shows a width smaller than the generated list:

#foo {
  position: absolute;
  background-color: wheat;
  border: 1px solid #aaa;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 50%;
}

span {
  padding: 4px;
}
<div id="foo">
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
</div>

Is it possible to dynamically make the div fitting its contents?

Please note that this is just a MCVE, the real page is much more complex so some solutions cannot be applied: firstly, the outer div must be absolutely positioned. Also, I cannot set a width (be it in px, %, vw etc...) to the div, which clearly could fix the problem:

#foo {
  position: absolute;
  background-color: wheat;
  border: 1px solid #aaa;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 50%;
  width: 100%;
}

span {
  padding: 4px;
}
<div id="foo">
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
</div>

Unless that width value is fit-content, but it doesn't work.

Also, just for completedness, wrapping the flex div in an absolutely positioned div doesn't work as well:

#foo {
  background-color: wheat;
  border: 1px solid #aaa;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 50vh;
}

#wrapper {
  position: absolute;
}

span {
  padding: 4px;
}
<div id="wrapper">
  <div id="foo">
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
    <span>Foo Bar Baz</span>
  </div>
</div>

Finally, I'm looking at the specs but I'm not sure if it's describing my situation: https://www.w3.org/TR/css-flexbox-1/#abspos-items

  • How about wrapping #foo div with another div and give that wrapper an absolute position instead of #foo? – subodhkalika Jul 19 '22 at 02:26
  • @subodhkalika I already tried that, unless I did something wrong it doesn't work. I just added it in the question. –  Jul 19 '22 at 02:29

0 Answers0