gpt4 book ai didi

javascript - Flexbox CSS - 在不影响其他行的情况下增加一个框以适应内容

转载 作者:太空宇宙 更新时间:2023-11-04 08:37:39 24 4
gpt4 key购买 nike

我试图强制最底部的行(黄色)“向下扩展”以填充可用内容:

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

我曾假设这可以通过使用来完成:

flex: auto;

我对这个问题的 .js 解决方案持开放态度,但如果有一个显然是理想的纯 css 解决方案。我希望我不必更改我的 HTML 标记。

我的想法是我有一个固定的顶部容器(浅绿色)和一个可以增长以容纳内容的底部容器,即使底部容器被分成两列。

最佳答案

.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>

关于javascript - Flexbox CSS - 在不影响其他行的情况下增加一个框以适应内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44338509/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com