因为使用了Flex-box导致父元素宽度无法被子元素内容撑开如何解决？

Lan_megumi

1771519

发布于
2023-08-02 广东

复现代码如下：Demo

我遇到一个需求，要求实现一个三级但不带联动效果的菜单

效果图如下：

红框的部分的数据是自定义，所以有少有多，少的时候显示一列，多的时候就两列

所以我打算红框部分用Flex-box解决，遇到了以下问题：

第二级菜单没有因为第三季的内容而把宽度给撑开

目前希望通过纯CSS的方式解决这个问题，如果有除了Flex-box能实现的方案也欢迎各位的分享

问了身边的朋友多少都是需要JS介入的（比如根据数量给Flex-box赋予一个宽度之类的）

flex

html5

阅读 3.5k

3 个回答

得票最新

Sure

7811212

发布于
2023-08-03 北京

✓ 已被采纳

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .list {
                display: flex;
            }
            .item {
                position: relative;
            }
            .drop-list {
                position: absolute;
                top: 100%;
                display: grid;
                grid-template-rows: repeat(3, auto);
                grid-auto-flow: column;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="list">
            <div class="item">
                <div class="item-text">123</div>
                <div class="drop-list">
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                    <div class="drop">wrwrewewrew</div>
                </div>
            </div>
        </div>
    </body>
</html>

xiaohe0601

1.2k126

发布于
2023-08-03 四川

更新于
2023-08-03

可以用 grid 布局实现（但是有一个缺陷是只能固定高度），示例如下：

.container {
  display: grid;
  grid-template-rows: repeat(auto-fill, 24px);
  // 指定列优先排列
  grid-auto-flow: column;
  grid-gap: 10px 20px;
  height: 200px;
}

.item {
  white-space: nowrap;
}