'child div can not grow when parent' position is relative inside an absolute

I have some nested div which I am showing some data to users, the problem is, parent width does not grow according to child's width.

below are the HTML and CSS I have :

#drppanel {
  top: 0px;
  bottom: auto;
  left: 0px;
  width: 141.078px;
  min-width: 141.078px;
  /* opacity: 1; */
  box-sizing: border-box;
  position: absolute;
  height: 200px;
  width: auto !important;
}

#parent {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  display: block;
  height: 100px;
  box-sizing: border-box;
  max-height: 240px;
  width: auto !important;
}

#child1 {
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  position: absolute;
  width: auto !impoetant;
  height: 200px;
  white-space: nowrap;
}
<div id="drppanel">
  <div id="parent">
    <div id="child1">
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>

    </div>

  </div>
</div>

if you run below code, the content does not shown completely because the parent's width does not grow according to it's content.

I mean it show show like below :

enter image description here

htmlcss


Solution 1:[1]

Change the width of the #child1 element and set it to fit-content, that way it'll take the full width of the content, also you had a typo of the word important.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#drppanel {
  top: 0px;
  bottom: auto;
  left: 0px;
  width: 141.078px;
  min-width: 141.078px;
  /* opacity: 1; */
  position: absolute;
  height: 200px;
  width: auto !important;
}
#parent {
  overflow: hidden auto;
  position: relative;
  display: block;
  height: 100px;
  max-height: 240px;
  width: auto !important;
}
#child1 {
  top: 0;
  left: 0;
  width: fit-content;
  height: 100%;
  width: auto !important;
  height: 200px;
  white-space: nowrap;
}
<div id="drppanel">
  <div id="parent">
    <div id="child1">
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>
      <p>
        Lonng text here is set to show Long text
      </p>

    </div>

  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions