Дети переполнения дочерних элементов 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

я не уверен, я понимаю, что вы пытаетесь сделать .. но если your'e спрашивать почему элементы Li переполнены справа .flex-контейнер, то это из-за левой: 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/

Answer 2

иметь чек

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