Recording two methods to achieve high CSS layout

Recently developed problems encountered: two elements within his party needs a dynamic contour, that is the height of about two div is uncertain, but require high arrangement

Was considered for a long time, there are many online solutions, but most are fixed height, not in line with actual requirements, so look at this record:

1. The flex highly adaptive layout (recommended)

<div style="display:flex;width: 200px;">
    <div style="flex:1;border:1px solid #AAA;word-break: break-word;">
            1111111111111111111111111111111111111111111111111
    </div>
    <div style="flex:1;border:1px solid #AAA">
        2222
    </div>
</div>

 2. Use the table-cell table layout

<div style="display:table;width: 400px;">
    <div style="display:table-cell">12122</div>
    <div style="display:table-cell;word-break: break-word;">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</div>

 In both cases will dynamically adjust the height based on the content div to fill, and I hope all of you to help

 

over