防止CSS3 flex-shrink破坏内容 [英] Prevent CSS3 flex-shrink from crushing content
问题描述
我试图在CSS3中创建一个灵活的布局，其中3个盒子彼此堆叠。框是兄弟，因此具有相同的父元素。第一个框的高度必须符合其内容。以下两个框的高度将增长以适合其各自的内容，直到它们将要溢出其父级。
I'm trying to create a flexible layout in CSS3 with 3 boxes stacked on each other. The boxes are siblings and thus have the same parent element. The height of the first box must fit its content. The height of the following two boxes shall grow to fit their respective content until they're about to overflow their parent. In that case, they shall shrink so that they don't overflow.
问题是，我无法弄清楚如何防止一个收缩盒变成如果其内容相对于另一收缩盒小，则压碎。我想要那些盒子缩小到某个点，在那里他们不会收缩 - 让我们说相当于两行文本为例。设置 min-width 不是一个选项，因为我不想让框高于它们的内容，例如内容只有一行。如果任何一个盒子已经到达它不再收缩的点，父母不能保持它们没有溢出，父母将得到一个滚动条。
The problem is that I can't figure out how to prevent one of the shrinking boxes from becoming crushed if its content is small in relation to the other shrinking box. I want those boxes to shrink down to a certain point where they won't shrink anymore – let's say the equivalent of two rows of text for example. Setting min-width isn't an option because I don't want the boxes to be taller than their content in case the content is only one row for example. If any of the boxes has come to the point where it shall not shrink anymore and the parent can't hold them without overflowing, the parent shall get a scrollbar.
I不知道内容，所以布局必须是动态的。
I don't know the content in advance so the layout has to be dynamic. I want to solve this only with CSS, if possible.
这里是 box3 太小的问题的例子：
Here's an example of the problem where box3 is too small:
<html>
<head>
<title>
test
</title>
<meta charset="utf-8">
<style type="text/css">
p
{
margin: 0;
}
.container, .box
{
border: 1px solid black;
}
.box
{
background-color: white;
margin: 1em;
overflow: auto;
}
#container
{
background-color: yellow;
display: flex;
flex-direction: column;
height: 15em;
overflow: auto;
}
#box1
{
flex: 0 0 auto;
}
#box2
{
}
#box3
{
}
</style>
</head>
<body>
<div id="container" class="container">
<div id="box1" class="box">
<p>◼</p>
</div>
<div id="box2" class="box">
<p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p>
<p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p>
</div>
<div id="box3" class="box">
<p>◼◻◻</p>
<p>◼◼◻</p>
<p>◼◼◼</p>
</div>
</div>
</body>
</html>
推荐答案
如果我正确理解你的问题，属性应该是你要找的。
IF I understand your question correctly, the flex-shrink property should be what you are looking for.
将＃box1设为 flex-shrink：0
将＃box2设为 flex-shrink：1
将＃box3设为 flex -shrink：1
这篇关于防止CSS3 flex-shrink破坏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
