如何使溢流元件不增加弹性框的高度?

Question

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

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

您可以看到溢出组件增加了其容器高度。 弹性盒中的溢出：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;
}

谢谢！

Answer 1

你可以使用 boostrap class 来实现这一点：

• 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>