Question

我正在尝试强制最底部的行（黄色）“向下扩展”以填充可用内容：

https://jsfiddle.net/darrengates/oucvnfke/

我原以为这可以通过使用：

来完成

flex: auto;

我对这个问题的.js解决方案持开放态度，但是如果有一个明显理想的纯css解决方案。我希望我不必更改我的HTML标记。

我的想法是，我有一个固定的顶部容器（浅绿色）和一个可以容纳内容的底部容器，即使底部容器被分成两列。

Answer 1

使用flex: 1 0 100%代替.row。

＆＃13;

.wrapper-row {
  min-height: 100px;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
}

/* the top row must always be 50px, regardless of the bottom content */
.top-row {
  background-color: lightgreen;
  flex-basis: 50px;
}

.bottom-row {
  background-color: yellow;
  flex: auto;
  /* this should allow bottom row to expand */
}

＆＃13;

<div class="container">
  <div class="row wrapper-row">
    <div class="col">
      <div class="row top-row">
        <div class="col">
          <div class="content-wrapper">
            <div class="content"></div>
          </div>
        </div>
      </div>
      <div class="row bottom-row">
        <div class="col">
          <div class="row">
            <div class="col col-6 bottom-left-col">
              <div class="content-wrapper">
                <div class="content"></div>
              </div>
            </div>
            <div class="col col-6 bottom-right-col">
              <div class="content-wrapper">
                <div class="content">
                  This content should be entirely contained within the yellow region, on account of flex: auto. Why isn't it?
                  <br />
                  <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum tortor in felis porttitor, at elementum massa vestibulum. Suspendisse lobortis tempor tellus.
                  <br />
                  <br />Donec aliquam laoreet tortor ut vulputate. Proin est ipsum, vehicula id lacus pharetra, dictum fringilla magna. Integer mollis nunc quis leo porttitor congue. Nam a nulla eget ipsum congue dapibus. Proin in elit iaculis tortor pretium
                  ullamcorper. Etiam cursus consequat vehicula. Suspendisse fermentum ante eu sodales mollis.

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Flexbox CSS - 增加一个框以适应内容，而不会影响其他行

1 个答案: