Flex项目在Chrome和IE11中重叠
我试图创建一个固定高度的flexbox布局，当内容太大时滚动内部内容。
此外，如果内容没有引起滚动，我想修复一个带有按钮的div到容器的底部。
我有一个在Firefox中完美运行的布局，但在Chrome中它会导致底部按钮div在内容的顶部剪辑，因为它足够大而导致滚动。
这是在Firefox中正确呈现的布局：
这是Chrome中不正确呈现的方式：
此外，如果没有足够的内部内容导致滚动，它应该如何表现：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
overflow-y: auto;
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}<div class="container">
<div class="options">
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
</div>
<div class="spacer"></div>
<div class="buttons">
<input type="button" value="Cancel">
<input type="button" value="Save">
</div>
</div>
3 个答案:
答案 0 :(得分：9)
解决方案
将此添加到您的代码中：
.container > * {
flex-shrink: 0;
}
说明
根据flexbox specification，对弹性项目的初始设置应为flex-shrink: 1。这意味着允许弹性项目缩小以避免容器溢出。
Chrome和IE11似乎遵守了此指南。
其他浏览器，例如Firefox，Edge和Safari，似乎默认情况下将flex-shrink设置为0。
另一方面，这可能与flex-shrink很少或没有关系。该问题可能与Flex项目上的默认min-height和min-width设置有关。 （见这里：Why don't flex items shrink past content size?）
或者它可能是两者的结合。这实际上取决于浏览器。
事实是，浏览器的实施方式各不相同。这就是你必须测试的原因。
规格初始设置并非完全可靠，因为
- 浏览器代表可以随心所欲的独立实体，
- 使用＆＃34;干预＆＃34;。
- Why don't flex items shrink past content size?（请参阅浏览器渲染说明）
- pseudo element not aligning at top left corner
- Google Chrome viewport-anchored expand direction with flexbox
- How to make images stay within the rows of a css grid container?
- Why are percentage heights working on children when the parent has no height defined?
干预是指用户代理决定稍微偏离的时间 标准化的行为，以提供一个大大增强的用户 经验。
换句话说，浏览器会自行提供它认为最适合其用户的设置，无论规范指南如何。
Chrome似乎做了很多这样的事情。以下是一些例子：
有一件事是肯定的：如果您停用flex-shrink，那么您的布局适用于所有浏览器。将其添加到您的代码中：
.container > * {
flex-shrink: 0;
}
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.container>* {
flex-shrink: 0;
}
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
overflow-y: auto;
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
/* new; for demo only */
}<div class="container">
<div class="options">
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
</div>
<div class="buttons">
<input type="button" value="Cancel">
<input type="button" value="Save">
</div>
</div>
您可能还想考虑仅将滚动条移动到选项框，然后您才真正将按钮固定到屏幕底部。对您的代码进行此调整：
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
/* overflow-y: auto; */
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: auto; /* NEW */
flex: 1; /* NEW; may be necessary for overflow to work in some browsers */
}
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.container > * {
flex-shrink: 0;
}
.container {
height: 150px;
width: 300px;
display: flex;
flex-direction: column;
/* overflow-y: auto; */
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: auto; /* NEW */
flex: 1; /* NEW; may be necessary for overflow to work in some browsers */
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px; /* new; for demo only */
}<div class="container">
<div class="options">
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
<div class="option">
<input type="checkbox"> Option
</div>
</div>
<div class="buttons">
<input type="button" value="Cancel">
<input type="button" value="Save">
</div>
</div>
另外，我删除了你的间隔元素。当有多种干净的方法在Flex容器中的项目之间创建空间时，它似乎没有必要。
答案 1 :(得分：0)
.container不需要“flex”，min-height的{{1}}属性可能就足够了：
.options .container {
height: 150px;
width: 300px;
/*display: flex;*/
flex-direction: column;
overflow-y: auto;
border: 1px solid #000;
padding: 4px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-height: 125px;
}
.options > div
{
display: inline-block;
}
.spacer {
flex: 1 1 auto;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}
答案 2 :(得分：-2)
这实际上与flex无关。你看到的是溢出它的容器的选项（overflow: hidden元素）。元素本身具有正确的大小，但容器本身是固定的高度。如果您将overflow: scroll或.options添加到public class Parkings
{
[Key]
public int ParkId { get; set; }
[Required]
public string StartDate { get; set; }
[Required]
public string EndDate { get; set; }
public int ParkCityId { get; set; }
public int ParkStreetId { get; set; }
[ForeignKey("CityId")]
public virtual Cities Cities { get; set; }
}
public class Cities
{
[Key]
public int CityId { get; set; }
[Required]
public string CityDesc { get; set; }
public virtual ICollection<Streets> Streets { get; set; }
public virtual ICollection<Parkings> Parkings { get; set; }
}
public class Streets
{
[Key]
public int StreetId { get; set; }
public int CityId { get; set; }
[Required]
public string StreetDesc { get; set; }
[ForeignKey("CityId")]
public virtual Cities Cities { get; set; }
}
，它会按预期呈现（尽管您可能不需要滚动条）。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？