css - 如何使溢出元素不增加 flexbox 的高度？

Question

我想构建 overflow: scroll in flexbox。

我不知道如何链接我的谷歌驱动器中的图片，所以我链接了这个 URL。 https://drive.google.com/open?id=17uM5twoprxmbo5xQ37kgeTaMwn7FGSu_

您可以看到溢出组件增加了它的容器高度。 flexbox 中的 overflow: scorll 组件工作正常，但它会使容器高度增加。

我怎样才能避免这个问题。

这是 Bootstrap 代码。

<div class="row display-flex">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <b-img fluid" src="image" />
  </div>
  <div class="col" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
            <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
       ........

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
  }
.display-flex .col {
    display: flex;
    flex-direction: column;
}

谢谢!

Answer 1

你可以为此使用 boostrap 类:

• d-flex 等于 display:flex

• flex-wrap 等于 flex-wrap:wrap

• flex-column 等于 flex-direction:column

• col flex-grow:1

• h-100 等于 height:100%

• overflow-auto 等于 overflow:auto

更多来自文档 https://getbootstrap.com/docs/4.3/utilities/borders/

您的代码中使用这些类的可能示例

/* demo purpose for snippet */

.fluid {max-height:90vh;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex flex-wrap">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <img class="fluid" src="http://dummyimage.com/445x555" />
  </div>
  
  <div class="col d-flex flex-column" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
            <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd col h-100" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    </div>
  </div>