css - 向左浮动时获取子项的高度

Question

我有一个父 div 和两个向左浮动的子 div。我想要得到的是根据 child 获得 100% 的高度。因此，如果一个 child 更大，那么整个容器应该有它的高度。

这是我的 scss

.whole-message-wrapper {
width: 100%;

.message-info-wrapper {
    background-color: yellow;
    float: left;
    width: 5%;

    .message-icons {
        .message {
        }

        .attachment {
        }
    }
}

.message-wrapper {
    background-color: red;
    float: left;
    width: 95%;
}
}

我不想有固定的高度，有什么想法吗？

所以我希望黄色 child 的高度与 parent 相同。

Answer 1

您可以使用 Flex 轻松解决此类问题。为您的 parent 应用 display:flex，它将解决问题。

   .whole-message-wrapper {
  width: 100%;
  display:flex;
}

.message-info-wrapper {
    background-color: yellow;
    float: left;
    width: 5%;
}

.message-wrapper {
    background-color: red;
    float: left;
    width: 95%;
}

<div class="whole-message-wrapper">
  <div class="message-info-wrapper">Message Info Wrapper</div>
  <div class="message-wrapper">
  <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
  </div> 
</div>