html - Flex 2 列，其中一列是固定宽度，另一列是宽度 100%

Question

我正在尝试将我的页面分成两列。我想要左侧的内容带有填充和边框。在右侧，我想要我的侧边栏，它具有固定宽度。

https://jsfiddle.net/mortenmoulder/04fkrkpp/

#container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
}

我试过这样做，但我不确定我是否应该使用 space-between 或其他东西。我基本上已经达到了我想要的效果，但填充应该在所有方面都相等。我该如何实现？

Answer 1

你可以使用 flex-grow:1; 而不是 width:100%;，你还需要改变一些其他的东西

直接在#left-container 上使用border 并添加margin 而不是padding，这将使所有边的空间相等。

See updated fiddle

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

#container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#left-container {
  flex-grow: 1;
  border: 20px solid black;
  margin: 50px;
}

#left {
  height: 100%;
}

#right {
  width: 300px;
  border-left: 1px solid black;
}

<div id="container">
  <div id="left-container">
    <div id="left">
      <p>
        Some content here
      </p>
      <p>
        Some content here
      </p>
      <p>
        Some content here
      </p>
    </div>
  </div>
  <div id="right">
    <p>
      Right sidebar
    </p>
  </div>
</div>