左のdivパーセントの幅、右の残りのスペースを埋める

Question

左のdivはパーセントの幅で左に浮動小数点が残り、左の浮動小数点は残りのスペースを占めたいと考えています。ここでは[フィドル]：https://jsfiddle.net/gfhfku8k/です。ご協力ありがとうございます。

HTML：

<div class="container"> 
    <div class="left"> 

    </div> 
    <div class="right"> 

    </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
.container { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #000; 
} 
.left { 
    width: 30%; 
    height: 100%; 
    float: left; 
    border: 1px solid #000; 
    overflow: hidden; 
} 
.right { 
    height: 100%; 
    /* width: 30px; */ 
    overflow: hidden; 
    float: left; 
    border: 1px solid #f00; 
} 

Answer 1

右の列にwidth: 70%を置くと仮定すると、レイアウトのこの種のが最も簡単flexで達成され、あなたが探しているものではありません。しくみはこうだ：私は列にfloatプロパティを削除し、すべての要素（*）（それは、このデモのために必要ではないですが）、それが正しく動作するためにbox-sizing: border-boxを追加

注意。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #000; 
 
    /* flex */ 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background: pink; 
 
    width: 30%; 
 
} 
 
.right { 
 
    background: blue; 
 
    /* flex */ 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 

 
    <div class="left"> 
 
    </div> 
 

 
    <div class="right"> 
 
    </div> 
 

 
</div>

Answer 2

あなたはこの

.right { 
    height: 100%; 
    overflow: hidden; 
    border: 1px solid #f00; 
} 

だけ削除floatを試すことができます。.RIGHTクラスから左。