0

I'm trying to accomplish example like instagram post: https://www.instagram.com/p/BXgsKFLBczA/?taken-by=claymicro List expands but does not push footer down and In my example if I add margin-bottom to comment class it pushes height of <div class="post-details-container"> and the there will be gap. enter image description here What I want to is to increase margin-bottom between comments but that should increase overflow of <div class="body> container, not expand other div and leave that green gap in image container.

Jsfiddle EXAMPLE: https://jsfiddle.net/ou21qe09/2/

if I add more than 5px to comment class it expands and leaves green gap in image container. Also adding padding-top to <div class="header"> also pushes div height and leaves green gap, Note that I can't set max-height in pixels of body or comment container because image size varies and that determines <div class="post-details-container" height.

    .comment {
       margin-bottom:10px;
}

What should I do ? set max-height on <div class="post-details-container"> or some other workaround ?

Thank you very much ! If more explanation needed just tell me :).

Community
  • 1
  • 1
Polisas
  • 491
  • 1
  • 9
  • 20
  • I don't understand. – sheriffderek Aug 08 '17 at 01:11
  • Well I linked to instagram post which shows what I'm trying to accomplish, addding new comments does not push height of details div, and comments container overflow only increases, and in my example increasing comments causes height of post details div increase and that leaves gap in image container – Polisas Aug 08 '17 at 02:13

2 Answers2

1

The overflow scroll should allow as many comments as you want... but something is clearly not working. Maybe you should rethink the general layout - and how you'd use flex-box: https://codepen.io/sheriffderek/pen/mMWRWY

markup

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


Stylus:

.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


Compiled 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;
}
sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • I think it should be... but I didn't have time to figure that part out. There isn't anything wrong with JavaScript. : ) The whole page is JS at some point... – sheriffderek Aug 08 '17 at 16:26
  • Yeah I know, it's just it's server-side-rendered, so window object is not available till client runs, but figured it out how to compute height of image before javascript runs :). Anyways you got me 90% of what I need, thank you very much :) – Polisas Aug 08 '17 at 16:31
  • AH... All the other options I could think of would likely use more JS. I'm just very concerned about the responsive layout of it... what if the windowWidth changes etc... but maybe you have a fixed width window? – sheriffderek Aug 08 '17 at 16:33
  • Yeah I put fixed width on main container, don't worry, you did more than I asked :). I'll figure it out the rest – Polisas Aug 08 '17 at 16:37
0

I Just change something on your JsFiddle.. Check it out. Modified JSFiddle

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

Jun
  • 138
  • 1
  • 9