Flexbox children overflow parent

问题

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>

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!

回答1:

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

you can see the effect in this fiddle: http://jsfiddle.net/r8a8ojuk/1/

回答2:

have a check

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

来源：https://stackoverflow.com/questions/31964380/flexbox-children-overflow-parent

标签

html

css

flexbox