ドロップフロートdivの場合は広すぎる

Question

I値ボックスが広すぎると、キーボックスを満たしている場合は、キーと値のペアの情報を持つボックスが...その後、値ボックスはキーボックスの下のドロップダウンしなければならない持って

https://jsfiddle.net/nwpems8w/

3行目の値は、キーボックスの下にドロップする必要がありますか？どうやってするか？

.box { 
 
    background: #aaa; 
 
    width: 150px; 
 
} 
 
.box_prop { 
 
    clear: both; 
 
    text-align: right; 
 
} 
 
.box_key { 
 
    float: left; 
 
} 
 
.box_value { 
 
    font-weight: bold; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long</div> 
 
    </div> 
 
</div>

Answer 1

使用float: rightにflex-wrap: wrapを使用してレイアウトを設定し、Flexboxでこれを行うことができます親の外出。

.box_value { 
    float: right; 
} 

.box { 
 
    background:#aaa; 
 
    width:150px; 
 
} 
 

 
.box_prop { 
 
    overflow: hidden; 
 
} 
 

 
.box_key { 
 
    float:left; 
 
} 
 

 
.box_value { 
 
    font-weight:bold; 
 
    text-align: right; 
 
    float: right; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long value giga longvalue giga long</div> 
 
    </div> 
 
</div>

Answer 2

あなただけ.box_prop.box-value上

.box { 
 
    background: #aaa; 
 
    width: 150px; 
 
} 
 
.box_prop { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.box_value { 
 
    font-weight: bold; 
 
} 
 
.box_value { 
 
    margin-left: auto; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long</div> 
 
    </div> 
 
</div>