css - 自动调整大小的CSS

Question

我正在制作一个组件，并试图在不使用 javascript 的情况下实现以下目标(最好使用 flexbox)。将其视为带有页眉和带控件的页脚的 Messenger 聊天屏幕。

规则:

• 粉红色容器的大小可以是任何大小，它在其父容器上的宽度/高度为 100%，最小为 200px
• 1 和 3 的高度也是动态的(可以是 100px，也可以是 300，具体取决于文本)
• 2 中的内容必须是可滚动的并且具有最小高度:200 像素

我面临的主要问题是我希望 1,2 和 3 不会溢出粉色容器。 有任何想法吗？有点被这个问题难倒了，不确定我是否缺少一些约束，没有这些约束，问题描述不当。

Answer 1

如果这符合您的想法，关键是内容 div 的 flex 属性。

我已经让页眉和页脚具有默认值:1 0 auto 并将内容设置为 200px 作为初始高度(是高度，因为 flex 容器方向设置为列)，但它允许 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>