Is there a way to shrink a flexbox to it's minimum in an absolute positioned box-CodePudding

I'm strugling with a flex-grid that's in a simple div-Container which is positioned absolute.

What I'm trying to archieve:

I want the whole box and grid to be compacted to it's minimal possible size.
I don't want to set a width to the parent container as the content may vary in size.

Codesandbox example:

CodePudding user response：

Try this:

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style type="text/css">
        .flexContainer {
            display: flex;
            flex-direction: column;
        }
        
        .flexItemDiv {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        
        .flexItem {
            margin: 5px 30px;
        }
    </style>
</head>

<body>
    <div style="
        position: absolute;
        top: 100px;
        left: 100px;
        border: 1px solid #000000;
        padding: 10px;
        
      ">
        <div class="flexContainer">
            <div class="flexItemDiv">
                <div class="flexItem">Line A:</div>
                <div class="flexItem">54,321.12 $</div>
            </div>

            <div class="flexItemDiv">
                <div class="flexItem">Line B:</div>
                <div class="flexItem">54,321.12 $</div>
            </div>

            <div class="flexItemDiv">
                <div class="flexItem">Line C:</div>
                <div class="flexItem">54,321.12 $</div>
            </div>

            <div class="flexItemDiv">
                <div class="flexItem">Line D:</div>
                <div class="flexItem">54,321.12 $</div>
            </div>
        </div>
    </div>
</body>

</html>