Flexbox CSS-擴大框以適合內容，而不影響其他行

Question

我試圖強制最底部的一行（黃色）“向下擴展”以填充可用內容：

https://jsfiddle.net/darrengates/oucvnfke/

我以為可以使用以下方法完成此操作：

flex: auto;

對於這個問題，我願意接受.js解決方案，但是如果有一個純CSS解決方案顯然是理想的。 我希望我不必更改HTML標記。

我的想法是，我有一個固定的頂部容器（淺綠色），還有一個底部容器，即使底部容器分為兩列，該底部容器也可以增長以容納內容。

Answer 1

在.row上使用flex: 1 0 100%代替。

 .wrapper-row { min-height: 100px; } .row { display: flex; flex: 1 0 100%; flex-direction: row; } .col { display: flex; flex-direction: column; flex-grow: 1; flex-basis: 0; } /* the top row must always be 50px, regardless of the bottom content */ .top-row { background-color: lightgreen; flex-basis: 50px; } .bottom-row { background-color: yellow; flex: auto; /* this should allow bottom row to expand */ } 

 <div class="container"> <div class="row wrapper-row"> <div class="col"> <div class="row top-row"> <div class="col"> <div class="content-wrapper"> <div class="content"></div> </div> </div> </div> <div class="row bottom-row"> <div class="col"> <div class="row"> <div class="col col-6 bottom-left-col"> <div class="content-wrapper"> <div class="content"></div> </div> </div> <div class="col col-6 bottom-right-col"> <div class="content-wrapper"> <div class="content"> This content should be entirely contained within the yellow region, on account of flex: auto. Why isn't it? <br /> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum tortor in felis porttitor, at elementum massa vestibulum. Suspendisse lobortis tempor tellus. <br /> <br />Donec aliquam laoreet tortor ut vulputate. Proin est ipsum, vehicula id lacus pharetra, dictum fringilla magna. Integer mollis nunc quis leo porttitor congue. Nam a nulla eget ipsum congue dapibus. Proin in elit iaculis tortor pretium ullamcorper. Etiam cursus consequat vehicula. Suspendisse fermentum ante eu sodales mollis. </div> </div> </div> </div> </div> </div> </div> </div> </div>