向左漂浮时获得孩子的身高

Question

我有一个父div，里面有两个子div，左边是浮动的。我想要得到的是取决于孩子的100％身高。因此，如果一个孩子更大，那么整个容器应该有它的高度。

这是我的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%;
}
}

我不想有固定的身高，任何想法？

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

Answer 1

您可以使用Flex轻松解决这些问题。为您的父母申请display:flex，它将解决问题。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/