html - Flexbox 子元素溢出父元素

Question

我在玩 flexbox，我的 flex-item 似乎溢出了它的父容器。 我能做些什么来确保它不会超出它的范围？

.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: column 和 LI 的 orient: horizo​​ntal.
但是，即使控件嵌套在具有设置宽度的 div 中，它们仍然会越过其边缘。 谁能给我一些建议，告诉我我应该做些什么不同:)？
谢谢!

Answer 1

我不确定我明白你想做什么.. 但如果你问为什么 li 元素溢出到 .flex-container 的右侧，那是因为 left: 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;
 }

你可以在这个fiddle中看到效果: http://jsfiddle.net/r8a8ojuk/1/