css - 向左 float 时获得 child 的高度

我有一个父div，并且在两个子div中向左浮动。我想要得到的是根据孩子的身高获得100％的身高。因此，如果一个孩子大一些，则整个容器的高度都应该高。

这是我的

.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%;
}
}

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

所以我希望黄色的孩子与父母有相同的身高。

最佳答案

您可以使用Flex轻松解决此类问题。为您的父母申请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>

关于css - 向左 float 时获得 child 的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49485876/