与滚动条相同高度的flex项目 - flexbox

如何创建相同高度的flexbox项目以及何时将更多文本添加到滚动条中？与滚动条相同高度的flex项目 - flexbox

.row-1,.row-2{ 
     display: flex; 
     align-items: flex-start; 
    }

https://codepen.io/o-sewell/pen/PmryKy?editors=1100

来源

2017-05-30 Oliver Sewell

对于这个工作，你需要设置一个最大高度，基于它不能安于......即是这样https://codepen.io/anon/pen/QvXojy – LGSon

你知道哪一个会有更多/更少的内容吗？我假设如此，并在下面给出了一个解决方案。但如果没有，请告诉我，如果没有用，我会删除答案。 –

谢谢@MichaelCoker，css绝对修复它，我认为:-) –

您必须添加overflow-y: scroll;你的CSS与你DIV一套height一起。

.container { 
 
    
 
} 
 
.row-1,.row-2{ 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 

 
.card { 
 
    background: lightgrey; 
 
    padding: 1em; 
 
    margin: .5em; 
 
    height:230px; 
 
    overflow-y:scroll; 
 
}

<div class="container"> 
 
    <div class="row-1"> 
 
    <div class="card card1"> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis vel enim facilisis, sit amet ornare metus vestibulum. In sollicitudin ipsum et pharetra cursus. Integer iaculis nec enim ut scelerisque. Suspendisse vulputate urna at ipsum blandit aliquam. Morbi mollis sed leo sit amet ultrices. Integer metus purus, blandit convallis sodales ac, mollis sit amet velit. Vestibulum quis massa hendrerit, vulputate arcu vitae, volutpat lorem. Duis nisi magna, ullamcorper sit amet bibendum ut, congue vitae leo. Aenean ultrices tincidunt nisi, at condimentum nulla dignissim iaculis. Praesent ut dui quam. Maecenas eget efficitur quam. Vestibulum hendrerit sem ac ornare ornare. Proin auctor odio mauris, sit amet auctor urna hendrerit sit amet. Proin turpis diam, accumsan ac tempor ac, fringilla a mi. Aliquam quis rhoncus felis.</p> 
 
    </div> 
 

 
    <div class="card card2"> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis vel enim facilisis, sit amet ornare metus vestibulum. In sollicitudin ipsum et pharetra cursus. Integer iaculis nec enim ut scelerisque. Suspendisse vulputate urna at ipsum blandit aliquam. Morbi mollis sed leo sit amet ultrices. Integer metus purus, blandit convallis sodales ac, mollis sit amet velit. Vestibulum quis massa hendrerit, vulputate arcu vitae, volutpat lorem. Duis nisi magna, ullamcorper sit amet bibendum ut, congue vitae leo. Aenean ultrices tincidunt nisi, at condimentum nulla dignissim iaculis. Praesent ut dui quam. Maecenas eget efficitur quam. Vestibulum hendrerit sem ac ornare ornare. Proin auctor odio mauris, sit amet auctor urna hendrerit sit amet. Proin turpis diam, accumsan ac tempor ac, fringilla a mi. Aliquam quis rhoncus felis.</p> 
 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis vel enim facilisis, sit amet ornare metus vestibulum. In sollicitudin ipsum et pharetra cursus. Integer iaculis nec enim ut scelerisque. Suspendisse vulputate urna at ipsum blandit aliquam. Morbi mollis sed leo sit amet ultrices. Integer metus purus, blandit convallis sodales ac, mollis sit amet velit. Vestibulum quis massa hendrerit, vulputate arcu vitae, volutpat lorem. Duis nisi magna, ullamcorper sit amet bibendum ut, congue vitae leo. Aenean ultrices tincidunt nisi, at condimentum nulla dignissim iaculis. Praesent ut dui quam. Maecenas eget efficitur quam. Vestibulum hendrerit sem ac ornare ornare. Proin auctor odio mauris, sit amet auctor urna hendrerit sit amet. Proin turpis diam, accumsan ac tempor ac, fringilla a mi. Aliquam quis rhoncus felis.</p> 
 
    </div> 
 
</div> 
 
</div>

来源

2017-05-30 18:39:24

是这是如何与flexbox一起工作使第二张卡片与第一张卡片具有相同的高度滚动条？你有什么样的例子 –

@Thomas Ray，他会在哪里添加它？或者提交一个工作示例。 – ExcellentSP

你去那里：https://codepen.io/Tomraydev/pen/rmEPEy?editors=1100 –

与滚动条相同高度的flex项目 - flexbox

回答

相关问题