Resizing a picture in <div> next to a sidebar - html

Question

I need to place a picture in a box on the right of the sidebar. div-box has certain size and border.
If i set the style to a picture, it enlarges to the size of the box, when i need it to be 100%.
If i set the style to a box, the box' borders expand to a sidebar.
Please advise.
.sidebar {
background: white;
height: 240px;
width: 240px;
float: left;
padding: 40px 46px 46px 46px;
}
.sidebar-button{
display: block;
height: 28px;
width: 240px;
border-top: #c8c8c8 1px solid;
border-right: #c8c8c8 1px solid;
border-left: #c8c8c8 1px solid;
padding-left: 20px;
text-decoration: none;
font-size: 15px;
color: gray;
padding-top: 12px;
}
.auto {
border-bottom: #c8c8c8 1px solid;
}
.sidebar-button:hover{
background-color: #f9f9f9;
color: black;
padding-left: 40px;
width: 220px;
}
.bike-picture {
border: #c8c8c8 1px solid;
margin: 40px 46px 46px 26px;
width: auto;
height: 400px;
padding-top: 40px;
text-align: center;
}
<div class="sidebar">
<a class="sidebar-button" href="#">Ноутбуки</a>
<a class="sidebar-button" href="#">Планшеты</a>
<a class="sidebar-button" href="#">Телефоны</a>
<a class="sidebar-button" href="#">Телевизоры</a>
<a class="sidebar-button" href="#">Бытовая техника</a>
<a class="sidebar-button auto" href="#">Автотовары</a>
</div>
<div class="bike-picture">
<img src="img/bike.png" alt="Bike">
</div>
enter image description here

Answer 1

check this one:
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap; /* Safari 6.1+ */
flex-flow: row nowrap;
-webkit-align-items: flex-start; /* Safari 7.0+ */
align-items: flex-start;
padding: 40px 0 46px 0;
background-color: white;
}
.sidebar {
height: 240px;
flex-basis: 240px;
padding: 0 46px 0 46px;
}
.sidebar-button{
display: block;
height: 28px;
width: 240px;
border-top: #c8c8c8 1px solid;
border-right: #c8c8c8 1px solid;
border-left: #c8c8c8 1px solid;
padding-left: 20px;
text-decoration: none;
font-size: 15px;
color: gray;
padding-top: 12px;
}
.auto {
border-bottom: #c8c8c8 1px solid;
}
.sidebar-button:hover{
background-color: #f9f9f9;
color: black;
padding-left: 40px;
width: 220px;
}
.bike-picture {
border: #c8c8c8 1px solid;
flex-grow: 1;
text-align: center;
}
.bike-picture img{
max-width: 100%;
}
<div class="container">
<div class="sidebar">
<a class="sidebar-button" href="#">Ноутбуки</a>
<a class="sidebar-button" href="#">Планшеты</a>
<a class="sidebar-button" href="#">Телефоны</a>
<a class="sidebar-button" href="#">Телевизоры</a>
<a class="sidebar-button" href="#">Бытовая техника</a>
<a class="sidebar-button auto" href="#">Автотовары</a>
</div>
<div class="bike-picture">
<img src="http://s12.postimg.org/fpyql332l/felt_bicycles_q26_194648_1.jpg" alt="Bike">
</div>
</div>