html - 使用 flex 的动态 div 高度

Question

我有两个并排的 div，但这些 div 在另一个 div 中。

<div class="row">
    <div id="maindiv1">
        <div id="subdiv1" class="col-md-8 col-sm-8">
            <div class="panel">
                <div id="head1">
                </div>
                <div id="cont1">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                    <li>d</li>
                </div>
            </div>
        </div>
    </div>
    <div id="maindiv2">
        <div id="subdiv2" class="col-md-8 col-sm-8">
            <div class="panel">
                <div id="head2">
                </div>
                <div id="cont2">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                     <li>4</li>             

                </div>
            </div>
        </div>
    </div>
</div>

在我的例子中，我希望两个 div #cont1 和 #cont2 动态增长，我需要设置相同的高度。也就是说，#cont1 和#cont2 的高度应该相同

我试着给出“display:flex”，但它没有用..请帮我解决这个问题

使用 jQuery 我可以设置高度，但我需要使用 html 和 css 进行设置。有什么办法吗？？？

http://fiddle.jshell.net/keshav_1007/1yvbt45b/4/ - 这是我的 fiddle

注意:我为每个 div 都有一个标题，它也应该出现..!!

CSS:

.row {
    display:flex;
    flex-flow:row;
}
#subdiv1,#subdiv2{
    display:table-cell;
    border:1px solid black;
}

Answer 1

首先，我认为您不应该使用没有 ol 或 ul 的 LI。其次，如果您使用的是 flex，您可能可以去掉很多容器和 Bootstrap 类。标记不必要地困惑，并且使用 ID 来设置样式而不是类也是不必要的，并且会使您的样式和标记困惑。

我相信这可以实现您正在寻找的东西:

CSS:

.row {
  display:flex;
  flex-flow:row;
  align-items: stretch;
}
.list-container{
  display:flex;
  flex: 1 auto;
  border:1px solid black;
  align-items: stretch;
  flex-flow:column;
}
.list-header{
  background-color: red;
}
.stretchy-list{
  background-color: blue;
  flex: 2;
  margin: 0;
}

HTML:

<div class="row">
  <div class='list-container'>
    <div class='list-header'>
      heading1
    </div>
    <ul class='stretchy-list'>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>d</li>
      <li>d</li>
      <li>d</li>
    </ul>
  </div>
  <div class='list-container'>
    <div class='list-header'>
      heading2
    </div>
    <ul class='stretchy-list'>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

Working JSFiddle