Наличие одного ряда гибких контейнеров, которые движутся в разных направлениях

Question

Я пытаюсь создать гибкий контейнер с двумя разными областями.Левая сторона будет иметь 2 гибких бокса, сложенных друг на друга, в то время как правая сторона (блок один) будет еще одним гибким контейнером с несколькими коробками в форме столбцов.Когда я в настоящее время создаю его, все это складывается в угол, и выглядит так.

.practice-flex-container {
  display: flex;
}

.practice-flex-container div {
  border: 1px #ccc solid;
  padding: 10px
}

.practice-left-flex-container {
  flex-direction: column;
}

.practice-right-flex-container {
  flex-direction: row;
}

.left-box {
  flex: 1;
}

.box-3 {
  flex: 1;
}

<div class="practice-flex-container">
  <div class="practice-left-flex-container">
    <div class="left-box">
      <h3>Search Here</h3>
      <p>_________</p>
    </div>
    <div class="left-box">
      <h3>Overall Stats: </h3>
      <p>Rewards: 127378</p>
      <p>Deposits: 127838</p>
    </div>
  </div>
  <div class="practice-right-flex-container">
    <div class="box-3">
      <h3>Box One</h3>
      <p>hello</p>
    </div>
  </div>
</div>

Answer 1

Вот что вам нужно знать.display:flex; заставляет его дочерние элементы автоматически становиться частью его гибкого макета.У дочерних элементов display:flex; должно быть flex:auto;, чтобы автоматически занимать пространство, доступное в родительском элементе display:flex;.flex-direction:row; - это направление по умолчанию для детей, у которых родительский элемент установлен на display:flex;.Чтобы переопределить это, вам нужно установить flex-direction:column;.

. Помните, что при вложении элементов родительские элементы вложенных элементов должны display:flex;, чтобы их дочерние элементы стали частью их гибкого макета.

После некоторого исследования, я думаю, что это то, что вы хотите:

.practice-flex-container{
  box-sizing:border-box; display:flex;
}
.practice-flex-container div{
  border:1px #ccc solid; padding:10px
}
.practice-flex-container>div{
  flex:auto; flex-direction:column; display:flex;
}
.practice-flex-container>div>div{
  flex:auto;
}
.practice-flex-container>div>div>div{
  display:flex;
}
.practice-flex-container>div>div>div>div{
  flex:auto; color:red;
}

<div class="practice-flex-container">
  <div class="practice-left-flex-container">
    <div class="left-box">
      <h3>Search Here</h3>
      <p>_________</p>
    </div>
    <div class="left-box">
      <h3>Overall Stats: </h3>
      <p>Rewards: 127378</p>
      <p>Deposits: 127838</p>
    </div>
  </div>
  <div class="practice-right-flex-container">
    <div class="box-3">
      <h3>Box One</h3>
      <p>hello</p>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>
        <div>stuff</div>
        <div>stuff</div>
        <div>stuff</div>
      </div>
    </div>
  </div>
</div>