Force-Max-Breite 100% auf div und Inhalt

Question

Ich versuche, Informationen für eine Pflanze direkt daneben anzuzeigen, und ich möchte die Informationen rechts vom Bild der Anlage zu bleiben, solange der Bildschirm ein hat spezifische Mindestbreite.

Problem ist: Wenn die Information eine Zeile enthält, die länger als die normale Breite von 100% übrig gebliebenen Breite-Raum im übergeordneten Div ist, wird das Informations-Div unter dem Bild angezeigt.

Beispiel mit guter Zeilenlänge (keine div-Wicklung): https://jsfiddle.net/o3sjug9q/
Beispiel mit zu viel Leitungslänge (div umschlungen): https://jsfiddle.net/seL72mt9/

Wie erzwinge ich die Details div seinen Text zu wickeln, anstatt selbst Einwickeln zur nächsten Zeile?

<div class="outer"> 
<div class="slidecontainer row" id="biodivslider" data-id="1"> 
<div class="sliderbtn nowrap" onclick="bwdpic()">&lt;</div> 
<div class="wrap"> 
    <div class="detailimg"><img src="http://www.nachhaltiger-weinbau.net/wp-content/plugins/biodivslider/img/Milchsterne/Dolden-Milchstern_Ornithogalum_umbellatum-Tci_2004.jpg" class="detailimg"></div> 
    <div class="details"> 
    <p><span class="detailslabel">Name:</span><br>Milchsterne</p> 
    <p><span class="detailslabel">Lateinischer Name:</span><br>(Ornithogalum spec.), O. umbellatum, O. nutans</p> 
    <p><span class="detailslabel">Standort:</span><br>mäßig trocken, sandig, Wärmezeiger, mäßig stickstoffreich</p> 
    </div> 
</div> 
<div class="sliderbtn nowrap" onclick="fwdpic()">&gt;</div> 
</div> 

</div> 

CSS:

div.outer { 
    width: 833px; 
    height: 491px; 
    background: lightblue; 
} 
div.slidecontainer { 
    max-height: 300px; 
} 

div.row { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-spacing: 10px; 
    max-height: 300px; 
} 

div.row > div { 
    float: none; 
    display: table-cell; 
    height: 100%; 
    width: 100%; 
} 

div.row > div.wrap > div { 
    float: left; 
} 
# 
div.detailimg { 
    height: 300px; 
    width: 300px; 
} 

img.detailimg { 
    display: block; 
    max-height: 300px; 
    max-width: 300px; 
} 

div.details { 
    max-width: 100%; 
    vertical-align: middle; 
    word-wrap: break-word; 
    overflow: visible; 
} 

span.detailslabel { 
    font-size: smaller; 
    font-weight: bold; 
} 

div.details > p { 
    line-height: 90%; 
    word-wrap: break-word; 
    overflow: visible; 
} 

div.sliderbtn { 
    font-size: 50px; 
    font-weight: 900; 
    min-height: 300px; 
    height: 100%; 
    width: 60px !important; 
    line-height: 300px; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: center; 
    cursor: pointer; 
} 

Answer 1

https://jsfiddle.net/tjepuh1L/

1.) löschen overflow: visible; von div.details und von div.details > p

2.) Definieren der max-Breite von div.details als calc(100% - 300px)

Answer 2

Änderung

div.details { 
max-width: 100%; 
vertical-align: middle; 
word-wrap: break-word; 
overflow: visible; 
} 

zu

div.details { 
max-width: 50%; 
vertical-align: middle; 
word-wrap: break-word; 
overflow: visible; 
} 

, wenn Sie verschiedene Größen für Ihre Bilder verwenden max-width in der CSS-Klasse Ihrer Bilder aswell bis 50%