Question

我以前无法看到此问题的位置。这有点棘手，但我希望有人能比CSS更好地帮助我解决这个问题。

下面的codepen将显示我想要做的事情 - 我有一个带溢出的div：auto，它包含一个带有display：flex和flex-direction：column的容器。其中有3个子div，其中第2个包含几个其他div，它们具有一定的宽度并设置为flex-shink：0，这使得容器的宽度大于overflow：auto包含div。我希望能够让孩子1和3都伸展到孩子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;
}

任何和所有帮助都非常感激。

Codepen

CSS flex-direction：column - 默认所有子项与scroll中最宽子项的宽度：auto

0 个答案: