0

我正在制作一个节点编辑器（沿着 UE4 的蓝图或 Blender 的着色器节点）并遇到一个问题，即当绝对定位的节点到达视口边缘时，它们的内部会被挤压。

这是一个关于实际问题的视频：https ://youtu.be/ZglXI7BOx-k （它在边缘之前被挤压的原因是因为我有translate(-50%, -50%)它）

我已经设置了以下简化示例，它仍然演示了问题

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS Squish test</title>
    <style>
        .wrapper{
            position: relative;
            width: 500px;
            height: 500px;
            background: #EEEEEE;
        }

        .node{
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #AAAAFF;
            padding: 4px;
        }

        .body{
            display: flex;
            flex-direction: row;
        }

        .column{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            flex-shrink: 0;
        }

        .entry{
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
        }

        .left{
            justify-content: flex-start;
        }

        .right{
            justify-content: flex-end;
        }
    </style>
    <script>
        window.onload = ()=>{
            let node = document.getElementById('node');
            node.style.left = '0px';
            main();
        }

        function main(){
            let node = document.getElementById('node');
            let oldPos = parseInt(node.style.left);
            node.style.left = (oldPos + 2) + 'px';

            requestAnimationFrame(main);
        }
    </script>
</head>
<body>
    <div class="wrapper">
        <div id="node" class="node">
            <div class="title">Title</div>
            <div class="body">
                <div class="column" style="background: #AAFFAA">
                    <div class="entry left">
                        <div>&lt;</div>
                        <div>Text</div>
                    </div>
                </div>
                <div class="column" style="background: #FFAAAA">
                    <div class="entry right">
                        <div>Text</div>
                        <div>&gt;</div>
                    </div>
                    <div class="entry right">
                        <div>A whole bunch of text</div>
                        <div>&gt;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

由于在实际程序中可以平移视口，如果节点不挤压，我更喜欢它，而是无论它们位于何处都保留其原始大小。我也想这样做而不为节点设置定义的宽度，因为我宁愿有不同大小的节点来根据它们的内容进行调整。

我的假设是让一个元素绝对从页面流中删除它，所以我很困惑为什么它仍在调整它的大小。有关如何解决此问题的任何解决方案？

4

1 回答 1

1

一个可能的解决方法是添加width: fit-content到节点。

根据 MDN ，当前的浏览器兼容性看起来不错，除了 IE。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS Squish test</title>
    <style>
        .wrapper{
            position: relative;
            width: 500px;
            height: 500px;
            background: #EEEEEE;
        }

        .node{
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #AAAAFF;
            padding: 4px;
            width: fit-content;
        }

        .body{
            display: flex;
            flex-direction: row;
        }

        .column{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            flex-shrink: 0;
        }

        .entry{
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
        }

        .left{
            justify-content: flex-start;
        }

        .right{
            justify-content: flex-end;
        }
    </style>
    <script>
        window.onload = ()=>{
            let node = document.getElementById('node');
            node.style.left = '0px';
            main();
        }

        function main(){
            let node = document.getElementById('node');
            let oldPos = parseInt(node.style.left);
            node.style.left = (oldPos + 2) + 'px';

            requestAnimationFrame(main);
        }
    </script>
</head>
<body>
    <div class="wrapper">
        <div id="node" class="node">
            <div class="title">Title</div>
            <div class="body">
                <div class="column" style="background: #AAFFAA">
                    <div class="entry left">
                        <div>&lt;</div>
                        <div>Text</div>
                    </div>
                </div>
                <div class="column" style="background: #FFAAAA">
                    <div class="entry right">
                        <div>Text</div>
                        <div>&gt;</div>
                    </div>
                    <div class="entry right">
                        <div>A whole bunch of text</div>
                        <div>&gt;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

于 2021-10-16T19:21:23.530 回答