Фиксированный div не выходит за пределы правого края экрана

Question

У меня есть div, у которого есть fixed. Проблема в том, что div перемещается вправо, не выходя за пределы правого края экрана. Он изменяет размеры, делая его ширину меньше. Этого не происходит, когда я даю ему фиксированный width. Но я хочу, чтобы у него была ширина жидкости с max-width. Я не хочу, чтобы он придерживался правого края, определяя right. Я хочу определить левую позицию и позволить избытку выйти из экрана.

Вы можете увидеть проблему здесь: http://codepen.io/anon/pen/BjZppJ

Нажмите на div в примере, чтобы увидеть проблему.

HTML КОД

<div> -- RANDOM TEXT HERE -- </div> 

CSS КОД

div 
{ 
    position: fixed; 
    left: 0; 
    top: 0; 
    padding: 20px; 
    max-width: 500px; 
    background: rgba(112,66,102, .1); 
} 

div.right 
{ 
    left: calc(100% - 300px) 
} 

Answer 1

Добавить width: 100%; в DIV, при этом он всегда будет стараться быть 100% ширины его родителя, но так как вы устанавливаете максимальную ширину, она не будет достаточно доступна.

$('div').click(function(){ 
 
    
 
    if($(this).hasClass('right')) 
 
    { 
 
    $(this).removeClass('right') 
 
    } 
 
    else 
 
    { 
 
    $(this).addClass('right') 
 
    } 
 
     
 
    
 
})

div 
 
{ 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 20px; 
 
    max-width: 500px; 
 
\t background: rgba(112,66,102, .1); 
 
    width: 100%; 
 
} 
 

 
div.right 
 
{ 
 
    left: calc(100% - 300px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>as dfas dfa sdf asdfasd fsdf sdfasdfa sdfasdfasd fasdfa sdfa sdfasdfa sdfasdfa sdfsdf sd</div>

Answer 2

добавления width:100% к определениям стилевых div будет делать трюк.

По умолчанию width:auto, а для элементов с фиксированными позициями он попытается рассчитать ширину, которая не переполняет размеры окна.