Flex 2 Spalten, wobei eine feste Breite und die andere Breite 100% ist

Question

Ich versuche, meine Seite in 2 Spalten zu teilen. Ich möchte Inhalt auf der linken Seite mit einem Polster darauf mit einer Grenze. Auf der rechten Seite möchte ich meine Sidebar, die eine feste Breite hat.

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

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

Ich habe versucht, das zu tun, aber ich bin nicht sicher, ob ich space-between oder etwas anderes verwenden sollte. Ich habe grundsätzlich erreicht, was ich will, aber die Polsterung sollte auf allen Seiten gleich sein. Wie erreiche ich das?

Answer 1

können Sie flex-grow:1; anstelle von width:100%;, und Sie müssen auch

Verwenden Grenze direkt auf # links Container und fügen margin statt padding von paar anderen Dingen zu ändern, wird dies den Raum macht gleich nach allen Seiten.

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

Check Code unten habe ich nur noch flex: 1 und einige unnötige Code aus Ihrer Demo

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>

entfernen

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