Flexbox子级溢出父级 [英] Flexbox children overflow parent

问题描述

我正在使用flexbox，而我的flex-item似乎溢出了其父容器.我该怎么做才能确保它不会超出范围?

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>

很抱歉，它有点长:)
但是我试图垂直列出一些控件，并且我想在一行上订购两个控件.
因此，UL通过flex-direction:列和LI的Orient:horizo​​ntal来容纳所有内容.
但是，即使控件嵌套在具有指定宽度的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!

推荐答案

我不确定我了解您要做什么.但是如果您要问为什么li项目在.flex-container的右侧溢出，那是因为左侧:15％;规则，你在那里.

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

您可以在此小提琴中看到效果: http://jsfiddle.net/r8a8ojuk/1/

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

这篇关于Flexbox子级溢出父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！