Question

我有一个定义为width的弹性容器。容器有flex-direction: row和2列。一个是固定宽度，它是不灵活的。另一个是灵活的，应该适合所有容器的剩余空间。

当灵活列内容足够时，它会溢出容器，超出其宽度。

为什么会发生这种情况？我应该如何正确地修复它？

注意：我已经通过使用flex解决了它：1 0 0而不是1 0 auto，它会很好。但我只是不明白为什么它会超越父母以及为什么它开始包装内容？这甚至是正确的方式吗？

HTML：

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
 </div>

CSS：

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: green;
}

.flex-item {
  display: block;
  margin: 20px 0;
}

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

JSFiddle

Answer 1

要达到预期效果，请同时指定.flexible类的宽度

.flexible { 
            flex: 1 0 auto; 
            width:200px;
            background-color: blue; 
            word-wrap:break-word;
   }

http://codepen.io/nagasai/pen/LkJzLz

Answer 2

在flex: 1 0 auto中使用.flexible设置以下内容

1为flex-grow且设置为
0为flex-shrink，因此您将其设置为不缩小
auto是flex-basis，在这种情况下是指width，由灵活项目的内容决定。

此外，您无法在flex-container中使用display: block它不起作用。 flex-direction的默认值是row，因此您可以删除它。您可以像.inflexible这样设置flex: 0 0 100px;的固定宽度。对于.flexible，您可以使用flex: 1，它将占用剩余的自由宽度。

.flex-container {
  display: flex;
  width: 500px;
  background-color: green;
}
.flex-item {
  margin: 20px 0;
}
.inflexible {
  flex: 0 0 100px;
  background-color: red;
}
.flexible {
  flex: 1;
  background-color: blue;
}

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
  </div>
</div>

Answer 3

如果我理解正确的话，我认为你在这里误解了一个或两个flex值。请考虑以下代码：

http://codepen.io/anon/pen/NALvPw

检查出来：

.your-flex-item { /*(child, not container)*/
  flex: <flex-grow> <flex-shrink> <flex-basis>; 
}

你的是：

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

如果你喜欢这样做，我建议将auto值更改为你想要的宽度，所以更像这样：

.inflexible {
  flex: 0 0 100px; /*auto changed to 100px*/
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
  background-color: blue;
}

Answer 4

在http://www.w3schools.com/cssref/css3_pr_flex-basis.asp中，它说明了以下flex-basis: auto：

长度等于灵活项目的长度。如果项目没有指定长度，则长度将根据其内容

flex-basis是由flex属性简写设置的第三个属性。

因此，如果将其设置为auto，则.flexible div的最大宽度（取决于其内容）将是display: flex容器的宽度。

Answer 5

在 .flexible 中将flex: 1更新为flex: 0 0 auto;。并从 .inflexible 中删除flex：.flex-container { display: flex; flex-direction: row; width: 500px; background-color: green; } .flex-item { display: block; margin: 20px 0; } .inflexible { flex: 0 0 auto; width: 100px; background-color: red; } .flexible { flex: 1 0 auto; background-color: blue; } .solution .flexible { flex: 1 0 0; } .question { margin-bottom: 20px; }。

要了解有关flexbox check https://css-tricks.com/snippets/css/a-guide-to-flexbox/

的更多信息

Updated Fiddle

<div class="question">
  <div class="flex-container">
    <div class="flex-item inflexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
    </div>
    <div class="flex-item flexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
    </div>
  </div>
</div>

<div class="solution">
  <div class="flex-container">
    <div class="flex-item inflexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
    </div>
    <div class="flex-item flexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
    </div>
  </div>
</div>

if($nullerror == true){
    $errors .= "<div class=\"head-main-recenttest-result\" style=\"text-decoration:none\">".$resulttextjudul."</div>";
 }else{
    $successes .= "<a href=\"bacasoal.php\"><div class=\"head-main-recenttest-result\"  style=\"text-decoration:none\">".$resulttextjudul."</div></a>";
 }

Answer 6

flex-wrap 属性是弹性框布局模块的子属性。它定义了弹性项目是强制在一行中还是可以流入多行。 flex-wrap 属性接受 3 个不同的值： nowrap（默认）：可能导致容器溢出的单行 wrap: 多行，方向由 flex-direction 定义 wrap-reverse：多行，与 flex-direction 定义的方向相反所以尝试使用 flex-wrap 使 flex 项目成多行。

Flex项目超出其容器

6 个答案: