如何風格並排側可伸縮的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>