フレックス2列、一方は固定幅、もう一方は幅100％

Question

私のページを2列に分割しようとしています。私は左のコンテンツを境界線と共にパディングしています。右側には固定幅のサイドバーがあります。

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

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

私はそれをやって試してみましたが、私はspace-betweenまたは何か他のものを使用する必要があるかはわかりません。私は基本的に私が欲しいものを達成しましたが、パディングはすべての面で同等でなければなりません。どのように達成するのですか？

Answer 1

あなたが代わりにwidth:100%;のflex-grow:1;を使用することができますし、あなたが＃左コンテナに

使用ボーダー直接だけでなく、いくつかの他のものの変化とpaddingの代わりにmarginを追加する必要があり、これはスペースが等しくなるようになりますすべての側に。コードの下

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/