Абсолютный позиционированный div breaks на относительных родительских краях

Question

У меня возникают некоторые проблемы при позиционировании абсолютного div внутри относительного. Я хочу, чтобы мой абсолютный div (встроенный блок) увеличивался до тех пор, пока он не достигнет заданного количества px (max-width). Это работает, как и ожидалось, до тех пор, пока я не добавлю ширину (меньшую, чем максимальная ширина абсолюта div) в относительный div.

Я хочу, чтобы текст в абсолютном-div разбивался на максимальную ширину (400 пикселей), а не на край относительного родительского div (300 пикселей).

При предоставлении белого пространства: nowrap, слова просто текут по абсолютному концу divs.

У кого-нибудь есть идея, как это решить?

Спасибо!

См:

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; 
}