Zwei divs Seite an Seite, gleiche Höhe von einer

Question

Angesichts der folgende Markup geregelt:

<div class="wrapper"> 
    <div id="one"> 
    Some content 
    </div> 
    <div id="two"> 
    Some content 
    </div> 
</div> 

Was ist der einfachste Weg ist sowohl divs die gleiche Höhe zu machen, die die berechneten Höhe von #two (speziell ist, mit der Höhe Auto aber Einhaltung min-height)? Also, wenn #two länger ist als #one, sollte #one erweitern, um zu entsprechen; Wenn #two kürzer ist, sollte #one abgeschnitten werden (und Überlauf gemäß seiner Einstellung overflow).

Ich denke Flexbox kann mein Retter hier sein (wie es so oft ist), aber ich kann nicht herausfinden, wie.

Answer 1

Wenn der erste Container ein absolutes Kind hat, nimmt er den Dokumentenfluss weg und wird immer von der Höhe des zweiten Flex-Kindes gesteuert. Wenn Sie den Inhalt von #zwei zu mehr ändern, sehen Sie, dass er richtig wächst. schau mal hier:

Demo: http://codepen.io/anon/pen/NbWmdB

html:

<div class="wrapper"> 
    <div id="one"> 
    <div class="one-inner"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    </div> 
    <div id="two"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. amet. 
    </div> 
</div> 

css:

.wrapper { 
    display:flex 
} 

#one { 
    background:red; 
    position:relative; 
    flex:1; 
    overflow:auto 
} 

.one-inner { 
    position:absolute; 


} 

#two { 
    background:green; 
    flex:1; 
} 

Hoffnung, die

Answer 2

hilft Es ist einfach, mit Flexbox:

• ein Spaltenlayout verwenden, so dass die Höhe der Haupt Größe
• einen Zeilenumbruch nach dem ersten Element Kraft getreten ist, so dass die flexiblen Elemente nebeneinander
• flex-basis: 0px Set lassen Sie es zunächst keine Höhe zu haben scheinen und dann lassen Sie es wachsen, um den verfügbaren Platz mit flex-grow: 1 zu füllen.
• Verwenden Sie einige overflow anders als sichtbar. Wenn der Inhalt überlaufen soll, verwenden Sie min-height: 0.

.wrapper { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    margin: 10px; 
 
} 
 
.one { 
 
    flex: 1 1 0px; 
 
    page-break-after: always; 
 
    break-after: always; 
 
    overflow: auto; 
 
} 
 
.one, .two { 
 
    border: 1px solid; 
 
    width: 50%; 
 
}

<div class="wrapper"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div> 
 
</div>

sind jedoch gezwungen Zeilenumbrüche nicht weit unterstützt. So können Sie auch gute alte Tabellen versuchen:

• Fügen Sie eine innere Hülle in die erste Zelle
• Machen Sie es absolut positioniert. Da absolut positionierte Elemente aus dem Fluss genommen werden, hat ihr Inhalt keinen Einfluss auf die Höhe des Behälters.
• Lassen Sie die relativ positionierte Zelle vollständig mit top, right, bottom, left füllen.

.wrapper { 
 
    display: table; 
 
    width: 80%; 
 
    table-layout: fixed; 
 
    margin: 10px; 
 
} 
 
.one, .two { 
 
    display: table-cell; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 
.one-inner { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="one"> 
 
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    </div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="one"> 
 
    <div class="one-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper, consectetur porta diam dapibus. Donec nibh nunc, imperdiet ut sollicitudin quis, auctor at nisl. Maecenas vel diam ligula. Pellentesque facilisis diam et est consectetur, et tristique nisl tincidunt. In et nibh in lorem commodo luctus. Maecenas vitae justo eget risus facilisis placerat. Vivamus sagittis hendrerit nibh, at sagittis enim cursus vel. Donec non est lectus. Maecenas augue erat, mollis eget volutpat eu, tincidunt sit amet nisl. Aenean lacinia justo ipsum, non porta felis interdum id. Pellentesque quis lectus molestie, viverra quam ac, congue purus.</div> 
 
    </div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra fringilla sodales. Nunc consequat nulla at ipsum semper.</div> 
 
</div>

Answer 3

ich das richtig verstehen Unter der Annahme.

Ich persönlich mag das Padding-Boden mit Überlauf nach Bedarf. Ich benutze diese Methode sehr, wenn ich div-Ebenen für responsive Online-Designer hinzufüge und alle Größen prozentual einschränken muss.

.wrapper {display: flex; padding-bottom: 56.25%; overflow: hidden} 
 
#one {background:green} 
 
#two {background:yellow;}

<div class="wrapper"> 
 
    <div id="one"> 
 
    Some content<br> 
 
    Some content<br> 
 
    Some content<br> 
 
    Some content<br> 
 
</div> 
 
    <div id="two"> 
 
    Some content 
 
    </div> 
 
</div>