Flexbox子级溢出父级 [英] Flexbox children overflow parent
问题描述
我正在使用flexbox,而我的flex-item似乎溢出了其父容器.我该怎么做才能确保它不会超出范围?
I'm playing around with flexbox, and my flex-item seems to overflow its parent container. What can I do to make sure it will stay inside its confines?
.content {
position: absolute;
top: 5%;
left: 25%;
width: 50%;
height: 80%;
}
.flex-container {
position: relative;
top: 20%;
left: 15%;
flex-wrap: wrap;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
}
.flex-item {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.basicInput {
float: left;
width: 70%;
}
#idField {
float: left;
width: 50%;
}
<div class="content">
<ul class="flex-container wrap">
<li class="flex-item">
<input type="datetime-local" id="dateField" class="basicInput" />
</li>
<li class="flex-item">
<input type="text" id="nameField" class="basicInput" placeholder=" Name:" />
</li>
<li class="flex-item">
<select id="idType">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" id="idField" placeholder=" number" />
</li>
</ul>
</div>
很抱歉,它有点长:)
但是我试图垂直列出一些控件,并且我想在一行上订购两个控件.
因此,UL通过flex-direction:列和LI的Orient:horizontal来容纳所有内容.
但是,即使控件嵌套在具有指定宽度的div中,它们仍会在其边缘上运行.任何人都可以给我一些有关我应该做些什么的指示:)?
谢谢!
Sorry that it is a bit long :)
But I'm trying to list a few controls vertically, and I want to order two controls on one line.
So an UL holds everything with a flex-direction: column and the LI's orient: horizontal.
But even though the controls are nested in a div with a set width, they still run over its edge.
Can anyone give me some pointers on what I should do differently :)?
Thanks!
推荐答案
我不确定我了解您要做什么.但是如果您要问为什么li项目在.flex-container的右侧溢出,那是因为左侧:15%;规则,你在那里.
I'm not sure I understand what you are trying to do.. but if your'e asking why do the li items are overflowing to the right of the .flex-container, then it is because of the left: 15%; rule you have there.
.flex-container {
position: relative;
top: 20%;
/* this is the problem --- left: 15%; */
flex-wrap: wrap;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
}
您可以在此小提琴中看到效果: http://jsfiddle.net/r8a8ojuk/1/
you can see the effect in this fiddle: http://jsfiddle.net/r8a8ojuk/1/
这篇关于Flexbox子级溢出父级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!