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 上使用边框并添加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>

Answer 2

检查下面的代码我刚刚添加了flex: 1并从您的演示中删除了一些不必要的代码

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

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

#left-container {
    padding: 50px;
    width: 100%;
    flex: 1;
}

#left {
    border: 20px solid black;
    height: 100%;
    /*width: 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>

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