使弹性项目的孩子等高[重复]

Question

好吧，我不太擅长 flex，还是个新手，也许这就是我遇到问题的原因。我有一个主要元素，其他元素使用 flex，所以它们可以像一行中的 2 或 3 个。我可以用 flex 使它们都具有相同的高度，这很酷，但是我需要使这些 flex 元素的子元素也具有相同的高度。写的够多了，看jsFiddle中的例子

如您所见，我想让这些“红色”元素的高度相同。这是我的风格的简单 SCSS 示例：

.main {
    display: flex;
    background: lightblue;

    .left, .right {
        flex: 1;
        margin: 15px;
        background: rgba(white,0.5);

        .content {
            padding: 15px;

            .inner {
                padding: 10px;
                background: rgba(red,0.3)
            }
        }
    }
}

Answer 1

正如 cmets 中所述，您不能使子元素的高度相等。但是对于您的具体情况，有一个解决方法：

.main {
  display: flex;
  background: lightblue;
}  
.left, .right {
  flex: 1;
  margin: 15px;
  border: 15px solid rgba(255,255,255,0.5);
  background: rgba(255,0,0,0.3);
  background-clip: padding-box; 

}        
.inner {
  padding: 10px;

}

<div class="main">
    <div class="left">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales. Morbi id libero nisi. Nam tellus lacus, efficitur in ultrices vel, tincidunt ac nunc. Mauris egestas ligula eget leo iaculis pellentesque. Aliquam varius ante sapien, ultricies scelerisque est sagittis sed. Mauris rutrum rhoncus tristique.

Aliquam accumsan sem sed mollis ullamcorper. Vestibulum eros ante, elementum vitae nulla non, porta placerat justo. Phasellus at condimentum magna, eu pharetra nibh. Aenean tincidunt, nibh a rutrum fringilla, dolor velit sagittis orci, ut pulvinar dui nisl vitae mauris. Vestibulum fringilla, orci eget dapibus posuere, urna arcu dictum nisl, a scelerisque nisi orci in quam. Proin suscipit libero turpis, nec mollis orci mattis at. Nam ultrices lorem non ex fringilla ultrices. Nulla mattis dapibus nisl non sagittis. Phasellus accumsan nunc ipsum, non mollis ante viverra id. Praesent vel purus et nibh tempor vestibulum sed eu tortor. Curabitur ut congue sem.</div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales.</div>
        </div>
    </div>
</div>

这只是 visual 等高的解决方案。根据您的实际目标，这可能不合适。