如何风格并排侧可伸缩的div

Question

如何两个div设置样式，使：

1. 他们并排
2. 权DIV扩展以适应其内容
3. 左格展开以适合右侧div的左侧空格，但其内容在填满div时会进行换行。

的影响可以用表来实现这样的：

<table class="container"> 
    <tr> 
     <td class="max"> 
      some text that we want to wrap within the div 
     </td> 
     <td class="min"> 
      some other text 
     </td> 
</table> 

和

.container { 
    width: 100%; 
} 
td.min { 
    width: 1%; 
    white-space: nowrap; 
    border:1px solid blue; 
} 
td.max { 
    border:1px solid red; 
} 

与div的下述溶液中，左格不一样，如果填写的内容空间不强迫它;当内容展开时，左侧div将出现在右侧。

<div id="container"> 
    <div id="left">some text that we want to wrap within the div</div> 
    <div id="right">some other text</div> 
</div> 

和

#container { 
    width: 100%; 
} 
#left { 
    float:left; 
    border: 1px solid red; 
} 
#right { 
    float:right; 
    border: 1px solid blue; 
} 

Answer 1

我想你想Flexbox的

#container { 
 
    width: 50%; 
 
    margin: 1em auto; 
 
    display: flex; 
 
} 
 
#left { 
 
    background: lightblue; 
 
    flex: 1; 
 
} 
 
#right { 
 
    background: lightgreen; 
 
}

<div id="container"> 
 
    <div id="left">some text that we want to wrap within the div</div> 
 
    <div id="right">some other text</div> 
 
</div>

Answer 2

您可以使用Flexbox的：

.container { 
 
    display: flex; 
 
    width: 20%; 
 
} 
 

 
.right { 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum odit saepe eius quisquam! Adipisci obcaecati quia sit eaque quo provident, corrupti iure nisi consequuntur, vero nulla molestias, placeat esse ut!</div> 
 
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ullam facilis blanditiis, necessitatibus nihil dicta cupiditate cum vero quod ipsam, nulla minus maxime asperiores natus reprehenderit eaque error ab porro?</div> 
 
</div>