Can't Make Max-width Work When Using Absolute Positioning

I can't get max-width to work when using absolute positioning. In https://jsfiddle.net/jn2bs6ax/ the item should take as little width as possible, up to the max-width of 1000px. Bu

Solution 1:

Try setting display: inline-table; or display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}

<divclass="relative">
  text
  <divclass="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Solution 2:

Try add width: 100%; for your class along max-width in any place.

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

<divclass="relative">
  text
  <divclass="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Solution 3:

As you already noticed, the issue is related to left:50% that will restrict the width of the element to 50% of the parent element.

One hacky way to overcome this is to increase the width of the parent element by adding more padding since absolute element will consider the padding-box. Then you add negative margin to rectify the added padding. You should simply pay attention to overflow:

.relative {
  position: relative;
  padding:050%;
  margin:0 -50%;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 800px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


.hide {
 overflow:hidden;
 height:500px;
}

<divclass="hide"><divclass="relative">
  text
  <divclass="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
  <divclass="absolute"style="top:200px;">Lorem ipsum dolor sit amet</div></div></div>