时间戳

首页 > 解决方案 > 两个具有相同高度的独立 flexbox 子级，没有 javascript

html - 两个具有相同高度的独立 flexbox 子级，没有 javascript

问题描述

在下面的标记中，这些左右 flexbox 容器是可滚动的，以便用户可以比较详细信息。

我需要一种能够使同一索引处的子元素具有相同高度的方法，即使它们的内容不同。

例如，2 个地址 div 应该具有相同的高度。

我可以用 javascript 做到这一点，但只用 css 就可以吗？

* {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
}

.container {
  display: flex;
}

.container .left,
.container .right {
  flex: 1;
  height: 100%;
  overflow: auto;
}

main .row:first-child {
  height: 100%;
}
<html>

  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="left">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
                <li>Nine</li>
                <li>Ten</li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
            <div class="address">
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>
            <div>
              <strong>Something else</strong>
              <ul>
                <li>One</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>

</html>

标签： htmlcssflexbox

解决方案

这是我的解决方案：

主要思想是设置两个div（具有地址类）的父级以显示flex。

<html>
    <head>
    <style>
        * {
  box-sizing: border-box;
}

div,
main {
  border: 1px solid red;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  flex: 1 1 0;
  display: flex;
}

.row {
  display: flex;
  flex: 1;
}

.address {
    flex-grow: 1;
}

.first {
    display:flex;
}

.second {
    display:flex;
}



main .row:first-child {
  height: 100%;
}
    </style>
    </head>
  <body>

    <header>Header</header>

    <main>
      <div class="row">
        <div class="col container">
          <div class="first">

            <div class="address">
            <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
              <p>Somewhere City</p>
              <p>That Country</p>
              <P>BWERE EREWW</P>
            </div>
             <div class="address">
             <div class="name">
              <strong>Name</strong> BoB Smith</div>
              <strong>Address</strong>
              <p>21</p>
              <p>Somewhere Street</p>
            </div>         
          </div>       
        </div>
      </div>
    </main>
  </body>

</html>

推荐阅读