在不向下推底部 div 的情况下增加 <li> margin-bottom

Question

我正在尝试完成类似 instagram 帖子的示例：https://www.instagram.com/p/BXgsKFLBczA/?taken-by=claymicro 列表扩展但不向下推页脚 在我的示例中，如果我将 margin-bottom 添加到评论类中，它会推动<div class="post-details-container"> 的高度，并且会有间隙。 我想要的是增加 cmets 之间的 margin-bottom 但这应该会增加 <div class="body> 容器的溢出，而不是扩展其他 div 并在图像容器中留下绿色间隙。

Jsfiddle 示例：https://jsfiddle.net/ou21qe09/2/

如果我向评论类添加超过 5 像素，它会扩展并在图像容器中留下绿色间隙。还将 padding-top 添加到 <div class="header"> 也会推动 div 高度并留下绿色间隙，请注意，我无法以主体或评论容器的像素为单位设置 max-height，因为图像大小会有所不同，这决定了 <div class="post-details-container" 高度。

    .comment {
       margin-bottom:10px;
}

我该怎么办？在 <div class="post-details-container"> 上设置 max-height 或其他一些解决方法？

非常感谢！如果需要更多解释，请告诉我:)。

Answer 1

我只是在您的 JsFiddle 上更改了一些内容。检查一下。 Modified JSFiddle

.body {background: yellow;padding: 0 15px 0 15px;height: 50vh;overflow-y: auto;}

Answer 2

溢出滚动应该允许尽可能多的 cmets...但是显然有些东西不起作用。也许你应该重新考虑总体布局 - 以及如何使用 flex-box：https://codepen.io/sheriffderek/pen/mMWRWY

标记

<div class="thing">

    <div class="left">
        <img src="https://placehold.it/1600x1300" alt="">
    </div>

    <div class="right">
        <header>
            header
        </header>

        <main>
            <h2>main comments?</h2>

            <ul>
                <li>comment</li>
                <!-- ... -->
            </ul>
        </main>

        <footer class='footer1'>
            footer 1
        </footer>

        <footer class='footer2'>
            footer 2
        </footer>
    </div>

</div>

手写笔：

.thing
    display: flex
    // border: 2px solid red
    .left
        flex-basis: 70%
        img
            display: block
            width: 100%
            height: auto
    .right
        flex-basis: 30%
        //
        display: flex
        flex-direction: column
        h2
            padding: 10px 0
            font-size: 20px
            margin-bottom: 10px
        header, main, footer
            padding: 10px
        header
            flex-grow: 0
            background: gray
        main
            flex-grow: 0
            // border: 2px solid blue
            overflow: scroll
            ul
                li
                    margin-bottom: 10px
        footer
            background: gray
            flex-grow: 0
        .footer1
            background: lightgreen

编译的 CSS：

.thing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.thing .left {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
}
.thing .left img {
  display: block;
  width: 100%;
  height: auto;
}
.thing .right {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.thing .right h2 {
  padding: 10px 0;
  font-size: 20px;
  margin-bottom: 10px;
}
.thing .right header,
.thing .right main,
.thing .right footer {
  padding: 10px;
}
.thing .right header {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  background: #808080;
}
.thing .right main {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  overflow: scroll;
}
.thing .right main ul li {
  margin-bottom: 10px;
}
.thing .right footer {
  background: #808080;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.thing .right .footer1 {
  background: #90ee90;
}