Question

我想显示最大高度但宽度可变的内容。

如果内容太高，那么我想要一个特定的子元素滚动，而不是整个内容。

如果我在所述子元素上设置overflow-y: auto，那么如果出现滚动条，则子元素的内容在不需要时会换行，如果他们使用更多宽度（滚动条的宽度）。 / p>

如果我设置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

我已将yourDBname替换为<p>并修改了CSS，从而修改了您的HTML。 Updated Fiddle

＆＃13;

<div>

＆＃13;

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

＆＃13;

Answer 2

您应该使用如下所示的最小宽度。不一定是178px。此值仅适用于您上面给出的示例。

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

当flex项具有滚动条时，防止文本被包装

2 个答案: