html - CSS Flex 基础孙子

Question

我很难让它发挥作用。

div {
  min-height: 100px;
}

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.sub-container {
  width: 50%;
  display: flex;
}

.child, .grand-child {
  flex-basis: 50%;
}

.yellow {
  background-color: yellow; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="desired-result container yellow">

  <div class="child red">
  1
  </div>
  
  <div class="child red">
  2
  </div>

</div>

<div class="issue container yellow">

  <div class="sub-container green">
    <div class="grand-child red">
    3
    </div>
  </div>

  <div class="sub-container green">
    <div class="grand-child red">
    4
    </div>
  </div>

</div>
  

https://jsfiddle.net/hugojg/dvasufot/21/

我想让元素的宽度符合flex-basis，同时作为我容器中的grand-child (display: flex)。

如何更改代码以使 3 和 4 与 1 和 2 类似？

仅供引用，我遇到这个问题是因为 bootstrap 4。 我在 .row 和 .col-sm-6(*) 元素之间有一个元素，这与上述场景完全相同。

编辑:

<form>
  <div class="row">
    <div class="wrapper">
        <div class="form-group col-md-6">
          <label for="inputEmail4">Email</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
        </div>
    </div>
    <div class="wrapper">
        <div class="form-group col-md-6">
          <label for="inputPassword4">Password</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
        </div>
    </div>
  </div>
</form>

那将是一个现实的场景。 取自 Bootstrap 4 文档并在输入周围添加了一个包装器元素。 我想要的只是这个包装器不会改变元素的定位。

Answer 1

我不确定我是否理解，但您希望 3 和 4 与 1 和 2 完全一样？如果是这样，你在这里:

div {
  min-height: 100px;
}

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.sub-container {
  width: 50%;
  display: flex;
}

.child, .grand-child {
  flex: 1;
  background-color: red;
}

.yellow {
  background-color: yellow; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="desired-result container yellow">

  <div class="child red">
  1
  </div>
  
  <div class="child red">
  2
  </div>

</div>

<div class="issue container yellow">

  <div class="sub-container green">
    <div class="grand-child red">
    3
    </div>
  </div>

  <div class="sub-container green">
    <div class="grand-child red">
    4
    </div>
  </div>

</div>

您必须更改 flex-basis 参数，50% 用于 child 和 100% 用于 孙子，因为他们是他们的子孙。