Flexbox子级溢出父级

Question

我正在玩flexbox，我的flex-item似乎溢出了它的父容器。 我该怎么做才能确保它能够保持在其范围内？

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

抱歉这有点长:) 但我试图垂直列出一些控件，我想在一行上订购两个控件 所以UL用一个flex-direction：列来保存所有东西，而LI的方向是水平的 但即使控件嵌套在具有设定宽度的div中，它们仍会在其边缘上运行。 谁能给我一些关于我应该做些什么的指示:)？ 谢谢！

Answer 1

有一张支票

＆＃13;

＆＃13;

//what's wrong here?

＆＃13;

.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%;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;