相对父母边缘绝对定位的div中断

Question

我在定位相对的绝对div时遇到了一些麻烦。我希望我的绝对div（内联块）增长到它达到给定的px-amount（max-width）。这按预期工作，直到我添加一个宽度（小于绝对div的最大宽度）到相对div。

我希望绝对div中的文本以最大宽度（400px）而不是相对父div（300px）的边缘断开。

当给予white-space：nowrap时，单词只流过绝对div的末尾。

有没有人有一个想法如何解决这个问题？

谢谢！

参见：

http://codepen.io/anon/pen/KVJvmZ

HTML

<div class="relativeContainer"> 
    <div class="absoluteContainer"> 
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px). 
    </div> 
</div> 

<div class="relativeContainer"> 
    <div class="absoluteContainer"> 
    This should stay small. 
    </div> 
</div> 

CSS

.relativeContainer { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    position: relative; 
    margin-bottom: 50px; 
} 

.absoluteContainer { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-width: 400px; /* Word-break should happen here. */ 
    border: 1px solid red; 
} 

Answer 1

恐怕是不可能解决这个问题跟您的标记。但隧道尽头有光：您可以更改标记或使用JavaScript来实现您想要的效果。

根据您的要求，这可以帮助你：http://codepen.io/anon/pen/eJXYOJ

HTML

<div class="relativeContainer"> 
    <div class="absoluteContainer"> 
    <div class="contentContainer"> 
     Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px). 
    </div> 
    </div> 
</div> 

<div class="relativeContainer"> 
    <div class="absoluteContainer"> 
    <div class="contentContainer"> 
     This should stay small. 
    </div> 
    </div> 
</div> 

CSS

.relativeContainer { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    position: relative; 
    margin-bottom: 50px; 
} 

.absoluteContainer { 
    position: absolute; 
    width: 100vw; /* do a large number of px for ie8 compatibility*/ 
    top: 0; 
    left: 0; 
    background-color: lightgray; /* just to show you what I've done*/ 
} 

.contentContainer { 
    display: inline-block; 
    max-width: 400px; /* Word-break should happen here. */ 
    border: 1px solid red; 
} 

Answer 2

绝对容器与相对父容器直接相关。

没有办法使绝对容器比相对父容器更大（宽度或高度）。

如果你想要一个绝对容器比他的父母更大（宽度或高度），父母不应该是相对的。

希望得到这个帮助。

有一个好

Answer 3

我不认为你想要做什么是可能的，而无需使用另一个类，或使用JS。这里是你如何可以用CSS做：

<div class="relativeContainer"> 
    <div class="absoluteContainer bigger"> 
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px). 
    </div> 
</div> 

<div class="relativeContainer"> 
    <div class="absoluteContainer"> 
    This should stay small. 
    </div> 
</div> 



.relativeContainer { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    position: relative; 
    margin-bottom: 50px; 
} 

.absoluteContainer { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-width: 400px; /* Word-break should happen here. */ 
    border: 1px solid red; 
} 

.absoluteContainer.bigger{ 
    width: 400px; 
} 

Answer 4

我看过你的榜样，我不认为你可以做你想做的，如果绝对是相对内，你没有指定的宽度。目前，只有最大宽度，内部的绝对容器没有理由超出相对容器，所以它不会。一旦你设置了一个宽度，你就可以得到你想要的东西，但小的不能保持小的！您可以通过在相对位置以外定位绝对位置来“欺骗”您想要的内容，但位于相同位置。这给了你想要的东西 - 但是如果绝对值更大，它不会（如）滚动相关的东西。在

例子：http://codepen.io/anon/pen/Nxovey

如果你不想（或不能）与额外的类CSS识别较长的文本，那么这是可以不用JavaScript的做到最好。

代码：

<div class="spoofContainer"> 
    <div class="absoluteContainer"> 
    Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px). 
    </div> 
</div> 
<div class="relativeContainer"> 

</div> 

<div class="spoofContainer"> 
    <div class="absoluteContainer"> 
    This should stay small. 
    </div> 
</div> 
<div class="relativeContainer"> 

</div> 

CSS：

.spoofContainer { 
    width: 400px; 
    height: 0px; 
    overflow: visible; 
    position: relative; 
} 

.relativeContainer { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    position: relative; 
    margin-bottom: 50px; 
} 

.absoluteContainer { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-width: 400px; /* Word-break should happen here. */ 
    border: 1px solid red; 
}