Flexbox children overflow parent

Question

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!

I cut off all the bling to make it easier to read, but now it doesn't really show the problem :p I want the 2 controls on a line to take up as much space as the other single-line controls. But Select is static and idField just takes up too little or overflows — user3307017, Aug 12 '15 at 12:15

score 1 · Accepted Answer · answered Aug 12 '15 at 12:13

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/

answered Aug 12 '15 at 12:13

omerkarj

663
2
7
18

glad to help. note that you have a lot of redundant and overlapping rules in your css. try reviewing it and clearing some of it up. – omerkarj Aug 12 '15 at 12:43
I figured as much, but I find it hard to figure out what everything does, actually :) – user3307017 Aug 12 '15 at 12:57

Sachin Kanungo · Answer 2 · 2015-08-12T12:18:53.917

0

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>

edited Aug 12 '15 at 12:18

answered Aug 12 '15 at 12:10

Sachin Kanungo

1,054
9
17

I want the 2 controls to take up as much space as the other ones, but since Select is static in size, the idField overflows or underflows the content div. – user3307017 Aug 12 '15 at 12:13
have a check at edit. You can control width by controlling your first 2 items and then 10% is assigned to id type. So if your first 2 fields are 70%, your number field must be 60 – Sachin Kanungo Aug 12 '15 at 12:19
Secondly for pin-point accuracy in size just set idField to 90% and .basicInput to 100% and handle size of div class .content by width attribute. – Sachin Kanungo Aug 12 '15 at 12:25
Yeah I guess that's a solution. But I wanted the Select to take up as much space as it needed, depending on the content, not dictated by me to maybe be too small, with a large font, or something :) – user3307017 Aug 12 '15 at 12:27
It is defined in percentage, so it will have enough space in your production code, you can also put it to 15% of 500px, and it will handle 1000 numbers easily. – Sachin Kanungo Aug 12 '15 at 12:29

Flexbox children overflow parent

2 Answers2

Linked