Question

我有两个基于flexbox的盒子，如果一个盒子里的文字多于另一个盒子，那么它们会相互匹配。

使用<!DOCTYPE html>时，它不会延伸，但如果没有标记，则按预期工作。

问题：我是否需要此标签，或者我可以删除它还是有办法解决这个问题？

＆＃13;

* {
  box-sizing: border-box
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: 400;
  font-family: "Montserrat", sans-serif; color: #9E888A; 
  display: flex;
  min-height: 100em;
  flex-direction: column;
}

.fullcontainer {
  width:100%;
  height:auto;
  background:#ECF0F1;
  color:#808B8D;
}

.container {
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:40px 0px 40px 0px;
}

.content {
  flex:1; 
  margin-right:310px;
}

.gridlg--fit > .grid-cell {
  flex: 1;
}
    
.gridlg--full > .grid-cell {
  flex: 0 0 100%;
}
    
.gridlg--1of2 > .grid-cell {
  flex: 0 0 50%;
}
    
.gridlg--1of3 > .grid-cell {
  flex: 0 0 33.3333%;
}
    
.gridlg--1of4 > .grid-cell {
  flex: 0 0 25%;
}
    
.gridlg--1of5 > .grid-cell {
  flex: 0 0 20%;
}
    
.row1 {
  flex:1;
  background:#ccc;
}
    
.row2 {
  background:#000;
  width:100%;
  height:30px;
}
    
.grid--flexCells > .grid-cell {
  display: flex;
}
    
.grid--gutters > .grid-cell {
  padding: 5px;
}
    
.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
    
.grid-cell {
  flex: 1;
  flex-direction: column;
}

＆＃13;

 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Mobile First Responsive Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
    <div id="main">    
      <div class="fullcontainer">
        <div class="container">
          <div class="content"> 
            <div class="grid grid--flexcells grid--gutters grid--full gridsm--full gridmd--full gridlg--1of2">
              <div class="grid-cell">
                <div class="row1">
                   test<br />
                   test<br />
                   test<br />
                   test<br />
                   test<br />
                </div>      
                <div class="row2">
                   test
                </div>               
              </div>
              <div class="grid-cell">
                <div class="row1">
                   test
                </div>      
                <div class="row2">
                   test
                </div>          
              </div>
           </div>
          </div>         
        </div>
      </div>   
    </div>
  </body>
</html>

＆＃13;

Answer 1

添加Css

.grid细胞{显示：柔性}

打破flexbox flex

1 个答案: