當Flex項目有滾動條時，防止文本換行

Question

我想顯示最大高度但寬度可變的內容。

如果內容太高，我想要一個特定的子元素滾動，而不是整個內容。

如果我在所述子元素上設置了overflow-y: auto，那麼如果出現一個滾動條，則當它們使用更多寬度（滾動條的寬度）時，它們不需要的子元素內容將自動換行。

如果我設置了overflow-y: scroll，則可以避免包裝，但即使不必要也會顯示滾動條。

任何想法，如何避免不必要的包裝，而不總是顯示滾動條？

.outer { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-height: 200px; 
 
} 
 

 
.flex-container table { 
 
    display: block; 
 
    flex: 1 1 auto; 
 
    overflow-y: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="outer"> 
 
    <div class="flex-container"> 
 
     <p>Top</p> 
 
     <table class="table"> 
 
      <tbody> 
 
       <tr> 
 
        <td>One two three four five</td> 
 
       </tr> 
 
       <tr> 
 
        <td>One two three four five</td> 
 
       </tr> 
 
       <tr> 
 
        <td>One two three four five</td> 
 
       </tr> 
 
       <tr> 
 
        <td>One two three four five</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     <p>Bottom</p> 
 
    </div> 
 
</div>

https://jsfiddle.net/0dnze1e7/

Answer 1

我已經通過更換<p>與<div>修改你的HTML和修改CSS。 Updated Fiddle

.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-height: 200px; 
 
} 
 
.flex-container .dynamic { 
 
    flex: 1; 
 
    overflow: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="outer"> 
 
    <div class="flex-container"> 
 
    <div>Top</div> 
 
    <div class="dynamic"> 
 
     <table class="table"> 
 
     <tbody> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
      <tr> 
 
      <td>One two three four five</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <div>Bottom</div> 
 
    </div> 
 
</div>

Answer 2

您應該使用的最小寬度像下面。不一定是178px。此值僅適用於上面給出的示例。

.flex-container table { 
    display: block; 
    flex: 1 1 auto; 
    overflow-y: auto; 
    min-width: 178px; 
}