向左浮动时获取孩子的高度答案

【问题标题】：Get height of children when floating left向左浮动时获取孩子的高度
【发布时间】：2018-03-26 17:01:26
【问题描述】：

我有一个父 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%;
}
}

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

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

【问题讨论】：

HTML?片段？弹性盒？
将父高度字段设为auto。它会根据孩子的身高包裹起来。

标签： css css-float

【解决方案1】：

您可以使用 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>

【讨论】：

不需要 100% & 浮动，宽度应该用 flexbox 的方式定义，flex: ... 或者只是 flex-basis: ...

【解决方案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/

【讨论】：