1

I can't see where this question has been asked before. It is a bit of a tricky one but I am hoping someone better at CSS than myself can help me resolve this.

The codepen below will show what I am trying to do - I have a div with overflow: auto, which contains a container with display: flex and flex-direction: column. There are 3 child divs inside of this, the 2nd of which contains several other divs that are a certain width and set to flex-shink: 0, which causes the container to be of a greater width than the overflow: auto containing div. I wish to be able to have child 1 and 3 both stretch to the width of child 2.

<html>
    <body>
        <div class="main">
            <div class="inner-container">
                <div class="col1">.col1</div> 
                    <div class="col2">
                        <div class="sub-col">col1.sub-col</div>
                        <div class="sub-col">col1.sub-col</div>
                        <div class="sub-col">col1.sub-col</div>
                    </div>
                <div class="col3">.col3</div> 
            </div>
        </div>
    </body>
</html>

body{
    background-color: lightgrey;
}

.main{
    margin-left: 200px;
}

.inner-container{
    display: flex;
    flex-direction: column;
    overflow-y: scroll; 
} 

.col1, .col3{
    background-color: grey;
    display: flex;
}

.col2{
    background-color: pink;
    display: flex;
    flex-direction: row;
}

.sub-col{
    flex-shrink: 0;
    width: 400px;
    background-color: lightblue;
}

Any and all help greatly appreciated.

Codepen

U4EA
  • 832
  • 1
  • 12
  • 27
  • 2
    The only reason child 2 extends into the overflow area is because its three content elements are set to `width: 400px`. For child 1 and child 3 to also extend into the overflow area, they would also need a specified width (or some other force; `width: auto` is not enough). See the duplicate for more details. – Michael Benjamin May 23 '18 at 20:47
  • 1
    Didn't see that question. Thanks for replying and pointing me to the other thread. – U4EA May 23 '18 at 21:28

0 Answers0