// IE10까지 호환
<style>
    .flex {
        display: flex;
    }
    .flex-item {
        min-width: 0;
        // IE10까지 맞추려면 이 구조에서는 아래처럼 0px이라고 선언해줘야된다. px도 생략해선안된다. 신기
        flex: 1 1 0px;
    }
    .txt {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .area {
        flex: 0 0 auto;
    }
</style>
        
<div class="flex">
    <div class="flex-item">
        <p class="txt">왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽</p>
    </div>
    <div class="area">오른쪽</div>
</div>