如何使溢出元素不增加flexbox的高度？答案

【问题标题】：How to make overflow elements not increase height of flexbox?如何使溢出元素不增加flexbox的高度？
【发布时间】：2020-01-31 23:51:11
【问题描述】：

我想构建溢出：在 flexbox 中滚动。

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

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

我怎样才能防止这个问题。

这是引导代码。

<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;
}

谢谢！

【问题讨论】：

获取信息。您可以将 d-flex 类用于 display:flex; 和 flex-column 用于 flex-direction:column;，然后使用 flex-wrap 用于 flex-wrap:wrap;

标签： css vue.js bootstrap-4 flexbox overflow

【解决方案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

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

/* 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>

【讨论】：