Div缩小以包装绝对定位div的宽度问题

Question

我遇到问题，#div_b的内容可以扩展到300px的宽度。无论我如何修改CSS，它仍然会被破坏。 （请不要问我为什么我在外部和内部div中使用绝对值，因为我有这样做的原因我不想扩展，因为这个问题不是关于那个问题）

CSS

#div_a{
  position: absolute;
  top:0;
  max-width:300px
}

#div_b{
  position: absolute;
  background-color:gray;
}

HTML

<div id="div_a">
  <div id="div_b">
    Lorem ipsum dolor sit amet, est tristique ligula odio semper inceptos ut
  </div>
</div>

JSFiddle

谢谢！

Answer 1

#div_b{
  position: absolute;
  width: 100%;
  background-color:gray;
}

删除位置：绝对;

#div_b{
  width: 100%;
  background-color:gray;
}

Answer 2

几种不同的解决方案。

删除最大值： http://jsfiddle.net/BRkCU/12/

删除职位： http://jsfiddle.net/BRkCU/15/

Answer 3

这应该这样做

#div_a{
  position: absolute;
  top:0;
  max-width:300px;
  width:100%;
}

#div_b{
   position: absolute;
   background-color:gray;
}

div_b没有扩展的原因是因为div_a没有扩展。通过将其设置为100％，您现在占用内容所需的空间，并保持最大宽度：300px，内容不会超出该区域。

Answer 4

我认为您正在寻找的是：

#div_b{
  position: absolute;
  background-color:gray;
  white-space:nowrap;
}