html - flexbox - 如何通过命题根据列的宽度调整居中椭圆的大小？

Question

我在 flex parent 中保留了一个圆圈。 flex 父调整大小。如何调整父级内容的大小？

我尝试通过流体设置圆圈大小，但也失败了。

.parent {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  align-items: center;
}

.child {
  border-right: 1px solid gray;
  width: 50%;
}

.last {
  text-align: center;
}

.circle {
  border: 1px solid gray;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0 auto;
}


/* my try but not works*/


/*

.circle{
  border:1px solid gray;
  border-radius:50%;
  width:50%; not works!
  height:50%; not works!
  display:inline-block;
  margin:0 auto;
}

*/

<div class="parent">
  <div class="first child">
    <p>Some text</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptate laborum at soluta maiores molestiae minus pariatur voluptas tempore illo, alias, atque deserunt, ex architecto necessitatibus vel nobis fugit consequuntur.</p>
  </div>
  <div class="child last">
    <div class="circle"></div>
  </div>
</div>

Answer 1

用这个

.circle {
  border: 1px solid gray;
  border-radius: 50%;
  width: 40%;
  padding-bottom: 40%;
  height:auto;
  display: inline-block;
  margin: 0 auto;
}

.parent {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  align-items: center;
}

.child {
  border-right: 1px solid gray;
  width: 50%;
}

.last {
  text-align: center;
}

.circle {
  border: 1px solid gray;
  border-radius: 50%;
  width: 40%;
  padding-bottom: 40%;
  height:auto;
  display: inline-block;
  margin: 0 auto;
}




/* my try but not works*/


/*

.circle{
  border:1px solid gray;
  border-radius:50%;
  width:50%; not works!
  height:50%; not works!
  display:inline-block;
  margin:0 auto;
}

*/

<div class="parent">
  <div class="first child">
    <p>Some text</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptate laborum at soluta maiores molestiae minus pariatur voluptas tempore illo, alias, atque deserunt, ex architecto necessitatibus vel nobis fugit consequuntur.</p>
  </div>
  <div class="child last">
    <div class="circle"></div>
  </div>
</div>