Flexbox孩子正在父母

时间：2016-02-10 20:12:50

标签： html css flexbox

我一直都在使用flexbox，但出于某种原因，这让我头疼了几天。

我正在寻找的是可以XY滚动（.scrollable）的青色区域，其周围有洋红色（.tab-content）填充。

似乎有它的最低项目是蓝色（.panels）div，它知道它应该是窗口宽度和200px高。然后灵活的孩子。身体从屏幕上长出来。

似乎问题在于。人们无法弄清楚父.panels有多宽。我从未遇到过像这样的问题，而且我很确定它无法将文本包装在青色表格中，但我必须将它们作为单独的行。

Chrome 48（版本规定）： enter image description here

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：2)

您需要使用position: absolute解决此问题，例如

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

示例代码段

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我将您的代码复制到.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>
相关问题
最新问题