Flexbox를 사용하여 콘텐츠 너비에 따라 범위를 만드는 방법
<p>고정 너비 플렉스 행 상위 요소에 범위와 div를 사용했습니다</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.parent {
디스플레이: 플렉스;
플렉스 방향: 행;
너비: 230px;
배경색: 파란색;
}
.child1 {
배경색: 빨간색;
}
.child2 {
최소 너비: 40px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<span class="child1">span의 일부 텍스트입니다</span>
<div class="child2"/>
<p><br /></p>
<p>범위는 항상 텍스트와 동일한 너비이고 div는 상위 요소의 나머지 너비 전체를 차지하기를 원합니다. 이제(코드 조각에서 볼 수 있듯이) 텍스트가 새 줄로 이동하면 빨간색 배경 영역이 텍스트보다 넓어집니다. 이 코드를 수정하는 방법은 무엇입니까? 텍스트 가장자리에서 정확히 끝나려면 빨간색 배경이 필요합니다</p>
