html - 为什么我的容器中的第二个 div 没有显示？

Question

我正在使用在另一个线程上找到的代码创建两个彼此相邻的 div。问题是第一个 div 应该有一个固定值，第二个应该只填充其余部分，但是当我试图给它一个百分比时它似乎只是删除了第二个 div:

     #wrapper {
         width: 100%;
         overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
         height: 150px;
         margin-bottom: 10px;
         overflow-y:hidden;
     	overflow-x:hidden;
     	border-radius: 10px;
     	background-color: #f1f2f4;
     }
     #first {
         float: left;
         width: 150px;
         height:150px;
     }
     #second {
     	width:100%;
     	height:150px;
         float:left;
    	padding: 1.5em;
     }

    <div id="wrapper">
        <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
        <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
    </div>

图片:

Answer 1

为什么会出现问题:

你有 #second { width:100%; }。这意味着两个元素不会彼此相邻，因为第二个元素将需要容器的整个宽度。但是第一个元素已经占据了所有的高度，并且你有 overflow: hidden; 所以第二个元素离开了容器(下面)并且根本不可见。只是为了看看它去了哪里，您可以稍微降低第一个元素的高度(比如从 150 像素到 120 像素)。

---

使用 flex-box 而不是 float 可以非常轻松直观地实现布局。现在所有现代浏览器都支持它。

#wrapper {
    width: 100%;
    margin-bottom: 10px;
    overflow:hidden;
    border-radius: 10px;
    background-color: #f1f2f4;
    display: flex;
}
#first {
    width: 150px;
    height:150px;
    flex-grow: 0;
    flex-shrink: 0;
}
#second {
  width:100%;
  height:150px;
  padding: 1.5em;
}

<div id="wrapper">
    <div id="first">
        Lorem ipsum whatever I'm writting in here.
    </div>
    <div id="second">
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
    </div>
</div>