SOURCE

<div class='card'>
    <div class='card_left'>
        <div class='card_left_img'>图片</div>
        <div class='card_left_text'>
            <div class='card_left_text_title'>flex布局中实现超长一行省略</div>
            <div class='card_left_text_desc'>描述描述描述描述描述描述描述描述描述描述描述描述</div>
        </div>
    </div>
    <div class='card_right'>按钮</div>
</div>

<div class="flex">
<div class="parent">
	<p class="childOne">关于使用flex布局的下父元素自适应宽度，子元素长度超出父元素宽度的一个解决方法</p>
	<button class="childTwo" type="button"></button>
</div>
</div>

.card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    /* width: 30%; */
}

.card_left {
    display: flex;
    min-width: 0;
    flex: 1;
}

.card_left_img{
    width: 70px;
    height: 70px;
    background: #fe8645;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.card_left_text{
    background: #117711;
    min-width: 0;
    flex: 1;

    overflow: hidden;
}

.card_left_text_desc{
    margin-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.card_right{
    padding: 10px;
    border-radius: 10px;
    background: #3c8ef5;
    color: #fff;
    margin-left: 20px;
}


.flex{
    display: flex;
}

.parent {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.childOne {
	flex: 1;
	margin-right: auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.childTwo {
	width: 20px;
	margin-right: 5px;
}