CSSフレックスボックス行をイメージで水平方向に自動的にサイズ変更する方法

Question

divにflex-basis：autoが設定されている場合、divは内容に合わせて垂直方向に展開されます。

Example

HTML：

<div class="parent"> 
    <div class="image"> 
    <img src="http://placebacon.net/400/103"> 
    </div> 
    <div class="text"> 
    -- Removed for readability -- 
    </div> 
</div> 

SCSS：

.parent { 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    display:flex; 
    flex-direction:column; 

    .image { 
    flex-basis:auto; 
    flex-grow:0; 
    flex-shrink:0; 

    img { 
     width:100%; 
     height:auto; 
    } 
    } 

    .text { 
    flex-basis:0px; 
    flex-grow:1; 
    flex-shrink:1; 

    overflow-y:scroll; 
    } 
} 

しかし、これは水平に動作しません。

Example 2

を

.parent { 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    display:flex; 
    flex-direction:row; 

    .image { 
    flex-basis:auto; 
    flex-grow:0; 
    flex-shrink:0; 

    img { 
     height:100%; 
     width:auto; 
    } 
    } 

    .text { 
    flex-basis:0px; 
    flex-grow:1; 
    flex-shrink:1; 

    overflow-y:scroll; 
    } 
} 

親の高さを変更すると、画像のサイズが変更されて縦横比が維持されます。しかし、フレックスボックスは変換前の画像のサイズを保持します。

予想される動作を得るために設定する必要のあるCSSプロパティはありますか？

Answer 1

あなたは、各要素のための計算をトリガするために、.parentに高さを設定.imageし、最終的にimgにする必要がありますように思える：https://jsfiddle.net/knjesznx/4/

あなたがすべき実際にリールコンテンツを表示せずに背景を表示しない限り、flex値を気にする必要はありません。すべてのスペースを埋めると考えられるコンテナにflex：1を追加してください。demo

.parent { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    height: 100vh;/* here */ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.parent .image { 
 
    height: 100%;/* here */ 
 
} 
 
.parent .image img { 
 
    height: 100%;/* here */ 
 
    width: auto; 
 
} 
 
.parent .text { 
 
    overflow-y: scroll; 
 
/* eventually use flex:1; to fill all space left*/ 
 
}

<div class="parent"> 
 
    <div class="image"> 
 
    <img src="http://placebacon.net/103/400"> 
 
    </div> 
 
    <div class="text"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

Answer 2

画像を削除して画像コンテナの背景として設定します。 CSSは次のようになります。

.image { 
 
    flex-basis:auto; 
 
    flex-grow:0; 
 
    flex-shrink:0; 
 
    height: 100%; 
 
    width: 150px; 
 
    background-image: url('http://placebacon.net/103/400'); 
 
    background-size: cover; 
 
    }