Flexbox子项溢出父项

Question

我正在玩flexbox，我的flex项似乎溢出了它的父容器。我能做些什么来确保它能呆在它的范围内？

.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以一个灵活的方向（柱）和LI的方向（水平）保存所有内容
但是，即使控件嵌套在具有设置宽度的div中，它们仍然在其边缘上运行。有谁能给我一些建议，说明我应该做些什么：）<谢谢！

Answer 1

检查一下

//what's wrong here?

.content {
  position: absolute;
  top: 5%;
  left: 25%;
  width: 500px;
  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;
  
}
#idType {
width:10%;
}
.basicInput {
  float: left;
  width: 70%;
}
 #idField {
 width:60%;
 }

<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>

Answer 2

我不确定我是否明白你想做什么。。但是，如果你问为什么李项目是溢出的权利。柔性容器，则是因为左侧：15%；这是你的规则。

.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/