html - Flexbox 对齐元素 : stretch not stretching low content div

Question

所以我有 2 个并排的 div。

每个 div 都有不同的背景颜色。

第一个 div 内容很少。

第二个div有很多内容。

在某些屏幕分辨率下，第二个 div 会溢出。

我需要第一个内容拉伸(stretch)到它的邻居的高度。

我认为 flexbox align-items: stretch 实现了这一点，但它似乎不起作用。

这里有一个工作模型:http://codepen.io/mildrenben/pen/MwxeJv

HTML:

<div class="wrap">
  <div class="first">
    First div content
  </div>
  <div class="second">
     // A Ton of content
  </div>
</div>

CSS:

html,
body {
  width: 100%;
  min-height: 100%;
}

.wrap {
   height: 100%;
   display: flex;
   align-items: stretch;
}

.first,
.second {
  height: 100%;
  width: 50%;
}

.first {
  background: green;
}

.second {
  background: blue;
}

Answer 1

将换行高度更改为 min-height...和 ​​

.wrap {
   min-height: 100%;
   display: flex;
   align-items: stretch;
}

.first,
.second {
flex:1 ;
}

html,
body {
  width: 100%;
  min-height: 100%;
}
.wrap {
  min-height: 100%;
  display: flex;
  align-items: stretch;
}
.first,
.second {
  flex: 1;
}
.first {
  background: green;
}
.second {
  background: blue;
}

<div class="wrap">
  <div class="first">
    First div content
  </div>
  <div class="second">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget semper dui. Suspendisse potenti. Sed sit amet arcu ante. Praesent vel commodo mi. Morbi eget diam id mi pellentesque gravida. Integer quis placerat quam. Morbi eu nunc eu neque feugiat
    interdum. Etiam est dui, ullamcorper quis accumsan eget, vulputate non odio. Praesent auctor quam vitae enim tincidunt blandit. Nunc fringilla rhoncus dignissim. Pellentesque pellentesque commodo dolor at posuere. Morbi scelerisque ante quis odio
    luctus aliquam. In et libero quam. Maecenas tincidunt eu diam at lobortis. Phasellus eu ipsum molestie lectus luctus sodales. Mauris blandit sed ante quis suscipit. Etiam porta dolor dui, a gravida quam tempor quis. Praesent eu varius mi, a vulputate
    ipsum. Praesent vestibulum felis a mi auctor fringilla. Integer dignissim vehicula felis, hendrerit tincidunt elit dictum vel. Sed eu vestibulum augue. Nulla facilisi. Donec ut augue velit. Praesent eget auctor mi. Pellentesque vel tempus eros, in
    congue sapien. Phasellus egestas pulvinar libero non suscipit. Nam facilisis bibendum ex vel blandit. Vivamus vulputate nibh vel facilisis porttitor. Fusce et blandit augue. Quisque rutrum lorem in sapien dictum, nec viverra magna posuere. Nullam
    sodales molestie augue ac volutpat. Proin sit amet gravida nunc. Sed justo sapien, rutrum ut enim non, efficitur finibus lacus. Sed euismod porttitor ex, eu finibus dui dignissim at. Donec mollis risus urna, nec feugiat leo molestie eget. Nam pellentesque
    malesuada ante, non vehicula dui pulvinar non. Pellentesque lorem eros, blandit sit amet pretium porta, bibendum nec magna. Nam vel turpis sed massa dictum pulvinar. Cras egestas aliquam tellus, nec pulvinar est laoreet in. Praesent nec nunc et ipsum
    condimentum ultrices et aliquam urna. Ut tincidunt aliquam libero. Sed laoreet ultricies tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus tortor mauris, sed interdum tellus finibus
    eu. Suspendisse pulvinar consequat diam, non dapibus odio euismod a. Nulla leo ante, pulvinar quis iaculis a, efficitur ut sapien. Fusce vitae egestas libero. Praesent vel turpis ut erat lobortis auctor laoreet vitae diam. In scelerisque est ac imperdiet
    ullamcorper. Sed sem elit, luctus ac dui non, facilisis fermentum est. Ut ac nisi non massa faucibus dictum non finibus eros. Donec finibus nibh et pretium lobortis. Pellentesque placerat tincidunt vulputate. Aliquam feugiat porta ipsum, ut fringilla
    neque placerat id. Cras auctor elit at enim aliquet consectetur. Pellentesque mollis neque justo, ut porttitor libero tristique dapibus. Donec sed dolor orci. Nunc ultrices feugiat velit non scelerisque. Sed et urna non sem efficitur scelerisque eget
    sit amet arcu. Cras hendrerit egestas est, in pretium ante tempor id. Nam eleifend, diam ac hendrerit molestie, eros tellus vulputate ante, sed facilisis orci massa vel leo. Ut lacinia justo sit amet ex sagittis eleifend. Etiam suscipit eget metus
    ac ornare. Etiam egestas, ex nec pretium accumsan, metus erat lobortis lacus, et laoreet tortor mauris ac ante. Vestibulum arcu odio, tristique eu tristique non, dictum ac lacus. Maecenas nec dignissim felis. Fusce elit dolor, interdum in semper ac,
    interdum ullamcorper ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin nec neque magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean et nunc commodo, gravida magna id, iaculis massa.
    Sed viverra ornare euismod. Nunc et massa non neque condimentum sodales. Vivamus maximus porta felis, sed tristique tellus auctor quis. Maecenas ipsum risus, luctus eget arcu eu, dapibus tempor dolor. Proin hendrerit, dolor vel facilisis faucibus,
    turpis nisi lacinia urna, ullamcorper vulputate diam nulla congue dolor. Vivamus sodales leo non aliquam imperdiet. Mauris ut sapien facilisis, pretium mi quis, malesuada felis. Proin ac sagittis enim. Aliquam et nisi in erat rutrum varius eget eget
    sapien. Phasellus eget justo at sapien porttitor elementum. Phasellus eget mauris odio. Aliquam erat volutpat. Morbi convallis, ex vitae dapibus mollis, odio justo lobortis augue, et mattis ex libero sit amet tortor. Donec suscipit, odio in aliquet
    aliquam, mi tellus dictum orci, sed cursus massa nulla id erat. Suspendisse potenti. Praesent nulla lorem, venenatis ut lacinia ut, hendrerit quis lorem. Vestibulum eget nulla efficitur, lacinia dui sit amet, condimentum arcu. Nam facilisis mauris
    vitae turpis ullamcorper sollicitudin. Phasellus feugiat erat a diam viverra, sed fringilla est egestas. Fusce at ex est. Sed rutrum feugiat libero, quis ullamcorper libero imperdiet vel. Mauris efficitur tortor faucibus urna cursus hendrerit. Vivamus
    quis posuere leo. Nullam dignissim blandit metus, nec volutpat mi tristique quis. Pellentesque tempus risus eget nibh dapibus fringilla. Suspendisse consectetur, nisi at condimentum venenatis, enim sem rutrum urna, sit amet sollicitudin ex mi semper
    urna. Nullam vehicula, augue ac congue mattis, nunc odio feugiat orci, sed porta odio odio mattis augue. Proin semper ut dolor ut fermentum. Pellentesque consequat pellentesque urna quis faucibus. Sed elit turpis, scelerisque in commodo ut, semper
    quis augue. Nulla maximus quam et lacus viverra, ut scelerisque diam varius. Phasellus viverra auctor dictum. Praesent vehicula vel arcu in ornare. Sed faucibus, odio et gravida faucibus, diam mauris gravida diam, id bibendum turpis lorem nec odio.
    Duis turpis augue, pulvinar et leo non, venenatis lacinia elit. In hac habitasse platea dictumst. Phasellus at iaculis ipsum. Quisque ultrices lacus eu elementum feugiat. In interdum mi ut quam sodales, in iaculis eros euismod. Suspendisse fringilla
    enim in sapien luctus, id commodo nisi aliquam. Donec sagittis at dolor ut convallis. Mauris a felis suscipit velit rutrum hendrerit. Vestibulum semper diam metus, nec tempus arcu feugiat in. Proin a nibh eu tellus faucibus dictum eu a enim. Pellentesque
    sed tempor turpis, id cursus massa. Suspendisse dolor velit, eleifend ut lacinia id, sodales id arcu. Maecenas id magna ut ligula laoreet faucibus. Vivamus tincidunt nibh id urna pulvinar auctor. Ut quis convallis lacus. Phasellus pellentesque leo
    luctus placerat ultricies. Quisque mollis dui lorem, rhoncus pulvinar justo sagittis sed. Aenean et diam id nisi mollis facilisis sit amet ac magna. Maecenas id consequat justo. Nunc laoreet massa et viverra aliquam. Vivamus imperdiet hendrerit vestibulum.
    Fusce orci odio, pharetra in imperdiet sed, tempor sed arcu. Ut feugiat massa urna, vitae vestibulum magna tincidunt et. Ut varius volutpat urna vel venenatis. Nullam tempor sapien sed pellentesque sodales. Vivamus luctus turpis erat, eget auctor
    metus tincidunt ut. Aenean ut consequat nisl. Donec at tincidunt turpis. Suspendisse sollicitudin, turpis id semper hendrerit, eros urna facilisis tellus, eget mattis ex velit sit amet leo. Donec sollicitudin massa nunc, vehicula efficitur sapien
    mollis nec. Nam hendrerit turpis arcu, ut facilisis ipsum vestibulum fringilla. Sed quis rutrum orci, id dictum diam. Ut faucibus mi nulla, at lobortis nisi suscipit at. Nunc at tincidunt arcu, vel commodo lorem. Sed leo ipsum, ultricies vitae fringilla
    ac, venenatis non quam. Donec congue tristique massa, sit amet pretium erat ullamcorper convallis. Donec efficitur et enim eu finibus. Fusce consectetur elit turpis, vel tempor felis laoreet quis. Donec semper maximus aliquet. Nullam velit augue,
    lobortis ut vehicula vitae, ullamcorper id lacus. In fringilla ullamcorper justo. Sed consectetur, nulla eu scelerisque tincidunt, dolor dui laoreet neque, quis mattis odio enim non ligula. Morbi varius nulla quis nibh vestibulum, vel consequat velit
    sollicitudin. Nullam cursus lacus porttitor ligula egestas, et varius velit pharetra. Aliquam vitae nibh et augue lobortis maximus ac at mi. Cras semper eget elit nec tristique. Sed cursus lorem augue, facilisis vestibulum felis pretium eget. Duis
    id erat dui. Sed vitae enim quam. Cras vel malesuada nisi. Pellentesque vitae aliquam tellus. Aliquam gravida at ante gravida facilisis. Donec a imperdiet risus, sed eleifend enim. Vestibulum accumsan id nunc et pellentesque. Phasellus maximus enim
    ut augue hendrerit pharetra. Cras dictum mauris sollicitudin massa fermentum, sed ultricies elit tempus. Maecenas pellentesque efficitur ligula in fermentum. Donec eleifend lorem et odio lacinia posuere. Etiam varius non tortor id elementum. Etiam
    tellus lacus, sagittis dapibus porta quis, porta nec mi. Nam sed massa ipsum. Cras maximus ipsum eget maximus molestie. Integer dictum leo at ex aliquam pretium. Ut sed ullamcorper sem, at suscipit elit. Sed ac massa mollis, elementum sem nec, consequat
    mi. Vestibulum sodales magna eget velit imperdiet molestie. Vestibulum tortor odio, egestas id aliquet eu, lacinia eget mi. Vivamus auctor, tortor vel dapibus suscipit, felis sem ullamcorper mi, ac tempus nisl velit sed purus. Sed eget blandit mauris.
  </div>
</div>

Codepen Demo