时间戳

首页 > 解决方案 > CSS Flex 行在横轴上不增长/溢出

html - CSS Flex 行在横轴上不增长/溢出

问题描述

我在 flex 行容器上有两个兄弟元素。

第一个是图像。

第二个是文本段落。我希望这个匹配图像高度而不是溢出它。它可以比图像小，但不能更大。

到目前为止，我尝试过玩：

.wrapper{
  height: 450px;
  width: 650px;
  background-color: lightgray;
}
    
.flex {
  display: flex;
}
    
.not-overflow {
  overflow: hidden;
  flex: 1 1 auto;
  max-height: 100%; /* This does nothing */
  background-color: pink;
}
<div class="wrapper">
    <div class="flex">
      <img src="https://static.abcteach.com/free_preview/c/cat05blowres_p.png" height="100%" width="auto">
      <div class="not-overflow">
        <p><strong>This paragraph should not overflow the image in height. It should match the sibling image height.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nunc pretium quam fermentum vulputate ut in sem. Nulla eu ipsum eget ante lacinia euismod eu imperdiet purus. Nullam sit amet nisl erat. Suspendisse eu felis nulla. Morbi eget sagittis nulla, vel fermentum quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis nisi id tincidunt facilisis. Nullam vulputate velit odio. Phasellus condimentum sapien sed nunc vulputate consectetur.

Ut ultricies, mauris at faucibus imperdiet, libero diam ultrices eros, sit amet euismod arcu libero eu libero. Morbi eleifend vehicula nisi, cursus ultrices nunc pharetra in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur fermentum vestibulum hendrerit. Vivamus consequat tortor eget lectus mollis congue. Sed vitae purus vitae odio pretium laoreet nec at ipsum. Cras iaculis blandit accumsan.</p>
      </div>
    </div>
  </div>

这里还有一个可以玩的 codepen：Codepen

标签： htmlcssflexboxoverflow

解决方案

推荐阅读