Flexbox子程序正在其父程序之外生长。

Question

我一直都在使用柔性盒，但由于某种原因，我已经挠了几天的头了。

我正在寻找的是青色的区域是XY-滚动(.scrollable)，与洋红(..tab内容)填充在它周围。

把它放在一起的最低项是蓝色(.panels) div，它知道它应该是窗口宽度和200 be高。然后，flex子.body就从屏幕上长出来了。

问题似乎是，.body不知道父.panels有多宽。我从来没有遇到过这样的问题，而且我很确定它是围绕着不能将文本包装在青色表中的，但我必须把它们作为单独的行。

Chrome 48 (强制版本)：

​

​

* {
  box-sizing: border-box;
}
.detail {} .panels {
  background-color: blue;
  display: flex;
  max-height: 200px;
}
.header {
  background-color: red;
  margin-right: 1rem;
  flex-shrink: 0;
}
.body {
  background-color: green;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tabs {
  flex-shrink: 0;
}
.tab-content {
  flex: 1;
  background-color: magenta;
  padding: 1rem;
}
.scrollable {
  overflow: auto;
  background-color: cyan;
}
.formatted-text {
  white-space: pre;
}

<div class="detail">
  <div class="panels">
    <div class="header">
      <table>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
      </table>
    </div>
    <div class="body">
      <div class="tabs">Tabs</div>
      <div class="tab-content">
        <div class="scrollable">
          <table>
            <tbody>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

​

Codepen这里： http://codepen.io/anon/pen/BjvWzR

Answer 1

你需要用position: absolute来解决这个问题，像这样

.scrollable {
  background-color: cyan;
  position: absolute;
  left: 1rem;
  top:1rem; 
  right: 1rem;
  bottom: 1rem;
  overflow: auto;  
}

样本片段

​

* {
  box-sizing: border-box;
}

.detail {}

.panels {
  background-color: blue;
  display: flex;
  max-height: 200px;
}

.header {
  background-color: red;
  margin-right: 1rem;
  flex-shrink: 0;
}

.body {
  background-color: green;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tabs {
  flex-shrink: 0;
}

.tab-content {
  flex: 1;
  background-color: magenta;
  padding: 1rem;
  position: relative;
}

.scrollable {
  background-color: cyan;
  position: absolute;
  left: 1rem;
  top:1rem; 
  right: 1rem;
  bottom: 1rem;
  overflow: auto;  
}

.formatted-text {
  white-space: pre;
}

<div class="detail">
  <div class="panels">
    <div class="header">
      <table>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
        <tr>
          <td>Field</td>
          <td>Value</td>
        </tr>
      </table>
    </div>
    <div class="body">
      <div class="tabs">Tabs</div>
      <div class="tab-content">
        <div class="scrollable">
          <table>
            <tbody>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
              <tr>
                <td>01</td>
                <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 2

我将您的代码复制到一个.html文件中并对其进行了测试，它正在按您的预期工作。我猜您的问题是由页面上某些父组件传递的其他css引起的。

下面是我为获得成功结果而运行的css和html的组合：

<html>
<head>
    <style type="text/css">
        * {
          box-sizing: border-box;
        }
        .detail {} .panels {
          background-color: blue;
          display: flex;
          max-height: 200px;
        }
        .header {
          background-color: red;
          margin-right: 1rem;
          flex-shrink: 0;
        }
        .body {
          background-color: green;
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .tabs {
          flex-shrink: 0;
        }
        .tab-content {
          flex: 1;
          background-color: magenta;
          padding: 1rem;
        }
        .scrollable {
          overflow: auto;
          background-color: cyan;
        }
        .formatted-text {
          white-space: pre;
        }
    </style>
</head>
<body>
    <div class="detail">
      <div class="panels">
        <div class="header">
          <table>
            <tr>
              <td>Field</td>
              <td>Value</td>
            </tr>
            <tr>
              <td>Field</td>
              <td>Value</td>
            </tr>
            <tr>
              <td>Field</td>
              <td>Value</td>
            </tr>
            <tr>
              <td>Field</td>
              <td>Value</td>
            </tr>
          </table>
        </div>
        <div class="body">
          <div class="tabs">Tabs</div>
          <div class="tab-content">
            <div class="scrollable">
              <table>
                <tbody>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                  <tr>
                    <td>01</td>
                    <td class="formatted-text">THIS IS SOME REALLY, REALLY LONG TEXT THAT REPRESENTS FIXED-WIDTH FILE OUTPUT, SO IT WILL BE IN A MONO FONT AND CANNOT BREAK PER LINE. EACH LINE IS 300 BYTES LONG.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>