Prevent text from wrapping when flex item has scrollbar

Question

I want to display content with a maximum height, but a variable width.

If the content is too tall, then I want a specific child element to scroll, rather than the entire content.

If I set overflow-y: auto on said child element, then if a scrollbar appears, the contents of the child element wrap when they wouldn't need to if they used more width (the width of a scrollbar).

If I set overflow-y: scroll , then wrapping is avoided, but a scrollbar is shown even if not necessary.

Any ideas of how to avoid the unnecessary wrapping without always showing a scrollbar?

 .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

I have modified your HTML by replacing the <p> with <div> and modified the 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

You should use a minimum width like below. Not necessarily 178px. This value is only for the example you have given above.

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