我正在制作一个组件，并在不使用JavaScript的情况下尝试实现以下目标（理想情况下使用flexbox）。可以将其视为带有标题和带有控件的页脚的Messenger聊天屏幕。
规则：
粉色容器的大小可以是任何东西，它在其父对象上的宽度/高度为100％，最小为200px
1和3的高度也是动态的（可以是100px，可以是300，取决于文本）
2中的内容必须可滚动并且最小高度为200px
我面临的主要问题是我希望1,2和3不会溢出粉红色的容器。
有任何想法吗？ Kinda对此很困惑，不确定是否缺少某些限制，否则就无法描述问题。
最佳答案
如果这符合您的想法，则关键是content div的flex属性。
我让页眉和页脚具有默认值：1 0 auto并将内容设置为200px作为初始高度（是高度，因为flex容器的方向设置为column），但是它允许div增长超过这200px 。
html, body {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
background: pink;
display: flex;
flex-direction: column;
}
.header, .footer {
background: green;
}
.footer {
justify-self: flex-end;
}
.content {
flex: 1 0 200px;
overflow: scroll;
}<div class="container">
<div class="header">
For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored. I'm a thing. Say what? No, of course not. It was… uh… porno. Yeah, that's it. Hey! I'm a porno-dealing monster, what do I care what you think? </div>
<div class="content">
Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Also Zoidberg. Oh sure! Blame the wizards! It must be wonderful. No! The kind with looting and maybe starting a few fires!
I suppose I could part with 'one' and still be feared…
What are their names?
Wow, you got that off the Internet? In my day, the Internet was only used to download pornography.
Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yes, I saw. You were doing well, until everyone died. Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say.
Fry, we have a crate to deliver. Does anybody else feel jealous and aroused and worried? You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! It's okay, Bender. I like cooking too.
Who said that? SURE you can die! You want to die?! You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Do a flip! As an interesting side note, as a head without a body, I envy the dead.
Who's brave enough to fly into something we all keep calling a death sphere? Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be…
I didn't ask for a completely reasonable excuse! I asked you to get busy! Stop! Don't shoot fire stick in space canoe! Cause explosive decompression! You won't have time for sleeping, soldier, not with all the bed making you'll be doing.
It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you? A true inspiration for the children.
Yes! In your face, Gandhi! WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! I was having the most wonderful dream. Except you were there, and you were there, and you were there! Isn't it true that you have been paid for your testimony?
Whoa a real live robot; or is that some kind of cheesy New Year's costume? When the lights go out, it's nobody's business what goes on between two consenting adults. Fry, you can't just sit here in the dark listening to classical music.
There's one way and only one way to determine if an animal is intelligent. Dissect its brain! And why did 'I' have to take a cab? And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!
We'll go deliver this crate like professionals, and then we'll go home. And from now on you're all named Bender Jr. Is that a cooking show? You're going back for the Countess, aren't you? Noooooo!
Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Why am I sticky and naked? Did I miss something fun? </div>
<div class="footer">
lorem asdasd
</div>
</div>关于css - 自动调整CSS大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50482675/