使用柔性版平行柱高度问题

我有四个divs /列，里面有不同数量的文本。使用flexbox我假定我能够将所有列的大小设置为最大的div大小，但是从codepen中可以看出，所有列都以不同的高度显示。使用柔性版平行柱高度问题

我的最终目标是让它们的高度一致，但当页面大小调整时，它们应该一致地挤压和拉伸，在中间点列将以2 x 2网格重新排列，移动大小所有的div都堆叠在一起。这部分按预期工作，但4个div仍然大小不一。

HTML：

<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 

<body> 
<div class="table-layout"> 
    <div class="table-cell row"> 

    <div class="flexboxContainer"> 

     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class="panel panel-default summary-panel" style="background: green; color: white;"> 
      <div class="panel-body flexboxContent"> 

      <div class="chartContainer"> 

       <div class="table-layout"> 
       <div class="table-cell row"> 
        <h1>0</h1> 
        <span style="font-size: 14px">blah blah blah blah</span> 
       </div> 
       <div class="table-cell row"> 
        <span style="font-size: 64px; opacity: 0.3"></span> 
       </div> 
       </div> 

      </div> 

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

     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class="panel panel-default summary-panel" style="background: green; color: white;"> 
      <div class="panel-body flexboxContent"> 

      <div class="chartContainer"> 

       <div class="table-layout"> 
       <div class="table-cell row"> 
        <h1>0</h1> 
        <span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah</span> 
       </div> 
       <div class="table-cell row"> 
        <span style="font-size: 64px; opacity: 0.3"></span> 
       </div> 
       </div> 

      </div> 

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

     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class="panel panel-default summary-panel" style="background: green; color: white;"> 
      <div class="panel-body flexboxContent"> 

      <div class="chartContainer"> 

       <div class="table-layout"> 
       <div class="table-cell row"> 
        <h1>0</h1> 
        <span style="font-size: 14px">blah blah blah blah</span> 
       </div> 
       <div class="table-cell row"> 
        <span style="font-size: 64px; opacity: 0.3"></span> 
       </div> 
       </div> 

      </div> 

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

     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class="panel panel-default summary-panel" style="background: green; color: white;"> 
      <div class="panel-body flexboxContent"> 

      <div class="chartContainer"> 

       <div class="table-layout"> 
       <div class="table-cell row"> 
        <h1>0</h1> 
        <span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span> 
       </div> 
       <div class="table-cell row"> 
        <span style="font-size: 64px; opacity: 0.3"><i class="fa fa-smile-o"></i></span> 
       </div> 
       </div> 

      </div> 

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

CSS：

.flexboxContainer { 
    display: flex; 
    border: solid red; 
    flex-wrap: wrap; 
} 

.flexboxContent { 
    border: solid black; 
    flex: 1 1 0; 
    align-items: stretch; 
} 

.table-layout { 
    display:table; 
    width:100%; 
} 

.table-layout .table-cell { 
    display:table-cell; 
} 

.chartContainer { 
    position: relative; 
}

Codepen例如： https://codepen.io/synchrosion/pen/yopxGY

我有Flexbox的容器和Flexbox的内容为清楚起见，边框高亮显示，我想将所有我的Flexbox内容框放在相同的高度，而不指定固定的最小或最大高度。

任何帮助，将不胜感激

来源

2017-08-17 RonanMc

你使用*方式*太多标记。 – Adam

我只是简化它从一个更复杂的代码片段，我想保留一些额外的div divs只是在他们证明是为什么flexbox不等于我的div高度的问题 – RonanMc

多余的标记使得使用flexbox正确得多。 – Adam

只需添加到你的CSS：

.panel-default { 
     height: 100%; 
    }

来源

2017-08-17 16:06:15

这里是你的问题提琴，你必须为你的flexboxContent设置身高100％

jsfiddle.net/ybtnhzna

来源

2017-08-17 16:16:08

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/17064371） – Andrew

使用柔性版平行柱高度问题

回答

相关问题