Question

我正在学习如何使用flex，我正在尝试制作一个简单的聊天应用程序。我遇到的问题是flexbox不会填充父容器的宽度。

我的HTML：

<div class="wrapper flex-col">
  <header>Header</header>
  <div class="main">
    <div class="sidebar">
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
      </ul>
    </div>
    <div class="flex-col content">
      <div class="flex-row">
        Test Test test
      </div>
      <div class="footer">
        Bottom
      </div>
    </div>
  </div>
</div>

我的CSS：

html, body {
  margin:0;
  height: 100vh;
}

.wrapper {
  height: 100vh; 
}

.footer {
  background-color: #999;  
}

header {
  width: 100%;
  background-color: #ff0000;
}

.sidebar {
  background-color: #eee;
  flex: initial;
  width: 300px;
  min-width: 100px;
}

.main {
  display: flex;
  flex: 1;
}

.flex-col {
  flex-direction: column;
  display: flex;
}

.flex-row {
  flex: 1;
}

.content {
  background-color: #555;

}

我做了codepen来演示。我希望课程“内容”填充宽度：即灰色框填充“测试测试”和文本底部的框。

感谢任何帮助。

干杯

Answer 1

它是一个flex项目，所以你必须给它flex属性。

   .content {
      background-color: #555;
      flex:1; /* add this */

    }

Codepen Demo

尝试使FlexBox正确呈现的问题

1 个答案: