自动调整大小css

时间:2018-05-23 07:47:09

标签: css flexbox

我正在制作一个组件,并且我试图在不使用javascript的情况下实现以下(理想情况下使用flexbox)。可以把它想象成一个带有标题和带控件的页脚的信使聊天屏幕。

enter image description here

规则:

  • 粉红色容器的大小可以是任何东西,它在父级上的宽度/高度为100%,最小为200px
  • 1&的高度3也是动态的(可能是100px,可能是300,取决于文本)
  • 2中的内容必须可滚动且最小高度:200px

我面临的主要问题是我希望1,2和3不会溢出粉红色的容器。 有任何想法吗?有点难以接受这个,并且不确定是否存在我缺少一些约束的情况,否则问题就会被描述。

1 个答案:

答案 0 :(得分: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>