当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

我已经通过用<div>替换<p>修改了你的HTML并修改了CSS。 更新小提琴

 .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;
}