남아있는 컨테이너 너비를 채우는 CSS

Question

CSS에 특정 문제가 있습니다. 나는 해결책을 찾기 위해 노력했지만, 난은 예를 들어 이런 종류의 찾을 수 없습니다 : https://jsfiddle.net/7nwxfgg5/

: 나는 문제의 간단한 버전으로 바이올린을 만들었습니다

.container { 
 
    background: blue; 
 
    height: 50px; 
 
} 
 

 
.nested { 
 
    background: red; 
 
    width: calc(100vh - 20px); 
 
} 
 

 
.primary { 
 
    background: yellow; 
 
    height: 50px; 
 
    float: left; 
 
} 
 

 
.secondary { 
 
    background: green; 
 
    height: 100%; 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="primary"> 
 
    <div class="nested"> 
 
     ffffff 
 
    </div> 
 
    </div> 
 
    <div class="secondary"> 
 
    wwwwwww 
 
    </div> 
 
</div>

을

사용 가능한 파란색 컨테이너 너비를 모두 채우기 위해 녹색 div를 확장하려고하지만 어떻게 할 수 있는지 전혀 알지 못합니다.

편집

플로트를 제거 :

.container { 
 
    background: blue; 
 
} 
 

 
.nested { 
 
    background: red; 
 
    height: 200px; 
 
    width: calc(100vh - 20px); 
 
} 
 

 
.primary { 
 
    background: yellow; 
 
    height: 50px; 
 
    float: left; 
 
} 
 

 
.secondary { 
 
    background: green; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="primary"> 
 
    <div class="nested"> 
 
     ffffff 
 
    </div> 
 
    </div> 
 
    <div class="secondary"> 
 
    wwwwwww 
 
    </div> 
 
</div>

: 폭 도움이을 왼쪽,하지만 지금은 그 높이와 함께 작동 나던 것을 발견,이 조각을 확인하시기 바랍니다 녹색 div의 크기를 빨간색과 같은 높이로 조정하려면 어떻게해야합니까?

Answer 1

플렉스는 실제로 레이아웃을위한 손입니다. 나는 그것이 가치가있는 것보다 더 많은 문제가 될 수 있으므로, 나는 그것을 피하려고 노력한다. 반응 형 레이아웃을 훨씬 쉽게 작성할 수 있습니다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { 
 
    background: blue; 
 
    height: 50px; 
 
    display:flex; 
 
} 
 

 
.nested { 
 
    background: red; 
 
    width: 100%; 
 
} 
 

 
.primary { 
 
    background: yellow; 
 
    flex:0 0 50%; 
 
} 
 

 
.secondary { 
 
    background: green; 
 
    flex:0 0 50%; 
 
}

<div class="container"> 
 

 
    <div class="primary"> 
 
    <div class="nested"> 
 
     ffffff 
 
    </div><!-- nested --> 
 
    </div><!-- primary --> 
 
    
 
    <div class="secondary"> 
 
    wwwwwww 
 
    </div><!-- secondary --> 
 
    
 
</div><!-- container -->