Overflow and flex: change the size of border-box by CSS

Question

During overflow, when set display: flex; by default (i.e.flex-direction: row;), the width of the border box is the whole scrollWidth; while the height of the border box is only the clientHeight. One may check the blue-border by the following example. If we change the flex-direction as column, the situation exchanges.

My question is: by directly set CSS, is their anyway to make the height of the border box to the whole content (i.e. scrollHeight), while keep display: flex; and flex-direction: row?

I know we can use JavaScript to set it as scrollHeight, but I want to know can we do it with CSS. I already tried flex-shrink and flex-basis, they have no effect on the border box.

#parent {
    white-space: pre-wrap;
    background-color: aqua;
    overflow: auto;
    width: 200px;
    height: 150px;
    display: flex;
    /*flex-direction: column;*/
    }

#main {
    border: 5px solid blue;
    display: inline-block;
    /*flex-basis: 200px;
    flex-shrink: 0;*/
    }

<div id="parent">    
    <span id="main"> <span>sdfsdfdfd </span>
        sdfdsfsdfdsafadsfasdfafdfsdfsdffsfsdfdsfdsf 
        sdfsdaf
         sdfdsfa
           dsfsdfsd dsf
        dfas sdfdsfa
        dsfsdfsd
        dsfsdfsd
        dfs
        sdfsf
    </span> 
</div>