Wenn 100% DIV schmaler als 300 px, als kein Schwimmer

Question

Code: https://jsfiddle.net/w5aref0L/ (bitte die Größe des Fensters, um besser zu verstehen, was mein Code tun)

<div class="left"> 
<div class="first">a a a</div> 
<div class="second"><p>a a a</p></div> 
</div> 

.left{ width: auto; padding-left: 300px; overflow: auto; } 
.first{ width: 300px; margin-left: -300px; background: red; float: left; } 
.second{ width: 100%; min-width: 50%; background: blue; float: right; } 

Was will ich erreichen: Wenn blaue DIV schmaler als 300 px ist, dann möchte ich, dass er unter roten DIV springt. Nicht neben ihm schweben.

• Ich habe versucht, ihn min-width, aber es funktioniert nicht.
• Ich will nicht Javascript
• I @media

Answer 1

Wenn ich verstehe, was Sie genau erreichen wollen, ist die Lösung width:calc(100% - 300px) für das zweite div zu verwenden, anstatt 100%, und es nach links zu schweben.

.first {width:300px; background:red; float:left;} 
 
.second {width:calc(100% - 300px); min-width:300px; background:blue; float:left;}

<div class="left"> 
 
<div class="first">a a a</div> 
 
<div class="second"><p>a a a</p></div> 
 
</div>

nahm ich auch die Freiheit, die negativen Margen zu entfernen, da diese, wie es aussah, war eine übriggebliebene von einigen Versuche bekommen es versäumt zu arbeiten.

Wenn dies nicht das ist, was Sie wollen, lassen Sie es mich wissen und wir können etwas ausarbeiten!

Edit: Sie sagen, Sie möchten nicht @media verwenden, aber falls Sie Ihre Meinung ändern, hier ist eine Lösung, die es verwendet.

.first {width:300px; background:red;} 
 
.second {width:300px; background:blue;} 
 
.second p {margin:0; padding:1em 0;} 
 

 
@media (min-width: 601px) { 
 
    .first {float:left;} 
 
    .second {margin-left:300px;} 
 
}

<div class="left"> 
 
<div class="first">a a a</div> 
 
<div class="second"><p>a a a</p></div> 
 
</div>

Answer 2

versuchen, diese

hinzufügen, um dieses CSS verwenden möchten nicht verwenden:

.div{ height: 100px; display:inline-block;font-size:16px;} 
.first{background-color: red; width: 300px; max-width:300px;} 
.second{background-color: blue; width:300px;max-width:300px;} 

hinzufügen html:

<div class="first">a a a</div> 
<div class="second">a a a</div> 

Demo: https://jsfiddle.net/abhishek2290/9kawkujf/