유동 너비 박스 구현

텍스트가 길어질 경우 말줄임이 적용되면서 텍스트 박스도 함께 줄어들도록 구현

html

<div class="filter">
	<div class="filter_box">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
	<button type="button" class="btn_refresh">버튼</button>
</div>

css

.filter {
    display: flex;
    height: 70px;
    padding-left: 8px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
    background-color: white;
}
.filter_box {
    flex: 0 1 auto;
    max-width: 300px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 38px;
    padding: 8px;
    background-color: white;
    margin: 16px 8px 0;
		box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn_refresh {
    height: 38px;
    margin: 16px 15px 0 auto;
    padding: 9px 11px 8px;
    border: 1px solid rgba(0,0,0,0.15);
    background-color: white;
    font-size: 17px;
		flex: none;
}
.icon {
    display: inline-block;
    font-family: "space_icon";
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
}