使用柔性版平行柱高度問題

我有四個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

使用柔性版平行柱高度問題

回答

相關問題