십자 축을 채우기 위해 아이들을 늘리는 방법?

십자 축을 채우기 위해 아이들을 늘리는 방법?

---

왼쪽-오른쪽 flexbox가 있습니다.

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

문제는 올바른 아이가 반응 적으로 행동하지 않는다는 것입니다. 구체적으로 래퍼의 높이를 채우고 싶습니다.

이를 수행하는 방법은 무엇입니까?

---

• row-flexbox 컨테이너의 자식은 컨테이너의 수직 공간을 자동으로 채 웁니다.

• flex: 1;나머지 수평 공간을 채우려면 하위 항목을 지정하십시오 .

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

• flex: 1;동일한 양의 가로 공간을 채우려면 두 자식 모두에 대해 지정 합니다.

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

참고 URL : https://stackoverflow.com/questions/29467660/how-to-stretch-children-to-fill-cross-axis