向左浮动时获取 children 的高度

Question

我有一个 parent div 和里面两个 child 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>

Answer 2

您可以使用 flexbox，而不使用 float

HTML

<div class="whole-message-wrapper">
    <div class="message-info-wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, harum.</div>
    <div class="message-wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, harum.</div>
</div>

CSS

.whole-message-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

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

}

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

https://jsfiddle.net/ht7mt3u1/7/

向左浮动时获取 children 的高度

Get height of children when floating left

css

css-float