子女的Flex子女不能扩展到100%。

Question

在CSS中，如果将子代的子代设置为 width: 100% 和包装的div有 display: flex 集，内容不会扩展到100%，它只使用内容的空间。

如何让它扩展到孙子集本身的大小，但仍然使用flex？

flex-grow可能不是答案，因为这将总是扩展到占用全部空间，而不尊重孙子集本身的大小。

请看下面的例子。

.wrapperFlex, .wrapperBlock{
  border: 1px solid silver;
}

.wrapperFlex {
  display: flex;
}

.levelOne {
}

.levelOneGrow {
  flex-grow: 1;
}

.levelTwo, .levelTwoFullWidth {
  color: white;
  background-color: blue;
}

.levelTwoFullWidth {
  width: 100%;
}

.levelOnePassthrough{
  display: contents;
}

<!-- Premise -->
<div class="wrapperFlex">
  <div>PRE</div>
  <div class="levelOne">
    <div class="levelTwoFullWidth">
      WRAPPER FLEX
    </div>
  </div>
  <div>AFTER</div>
</div>
<br/>

<!-- Not what is wanted, the grandchild here does not actually expand to 100%
it should be only as wide as the content here -->
<div class="wrapperFlex">
  <div>PRE</div>
  <div class="levelOneGrow">
    <div class="levelTwo">
      WRAPPER FLEX GROW
    </div>
  </div>
  <div>AFTER</div>
</div>

<br/>

<!-- What is wanted but not possible, display: contents is not commonly available -->
<div class="wrapperFlex">
  <div>PRE</div>
  <div class="levelOnePassthrough">
    <div class="levelTwoFullWidth ">
      WRAPPER FLEX PASSTHROUGH
    </div>
  </div>
  <div>AFTER</div>
</div>

Answer 1

你可以给孩子设置flex-basis吗？

.wrapperFlex, .wrapperBlock{
  border: 1px solid silver;
}

.wrapperFlex {
  display: flex;
}

.wrapperBlock {
  display: block;
}

.levelOne {
  flex-basis: 100%; /* Set flex-basis to 100% */
}

.levelTwo {
  color: white;
  width: 100%;
  background-color: blue;
}

<div class="wrapperFlex">
  <div class="levelOne">
    <div class="levelTwo">
      WRAPPER FLEX
    </div>
  </div>
</div>

<br/>

<div class="wrapperBlock">
  <div class="levelOne">
    <div class="levelTwo">
      WRAPPER BLOCK
    </div>
  </div>
</div>

Answer 2

设置.levelOne {width:100%}。如果我没有理解错的话。

Answer 3

你需要将flex属性作为一个属性添加到子项目中，即 levelOne 像这样 flex:1;.它将正常工作，你检查这里。

.wrapperFlex, .wrapperBlock{
  border: 1px solid silver;
}

.wrapperFlex {
  display: flex;
}

.wrapperBlock {
  display: block;
}

.levelOne {
flex:1;
}

.levelTwo {
  color: white;
  width: 100%;
  background-color: blue;
}

<div class="wrapperFlex">
  <div class="levelOne">
    <div class="levelTwo">
      WRAPPER FLEX
    </div>
  </div>
</div>

<br/>

<div class="wrapperBlock">
  <div class="levelOne">
    <div class="levelTwo">
      WRAPPER BLOCK
    </div>
  </div>
</div>