flexbox - 命題によって列の幅に応じて中央楕円のサイズを変更するにはどうすればよいですか？

Question

私はフレックスの親の中に円を維持しています。フレックス・ペアレントのサイズがうまく調整されます。親の中のコンテンツのサイズを変更するにはどうすればよいですか？

流体で円のサイズを設定しようとしましたが、失敗しました。

.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>