Flexboxで、横いっぱいにdivを広げたい

Question

Flexboxを使用し、2つの横並びのコンテンツを作りたいです。

左側のimgをwidth:100%にし、左側は残りの幅いっぱいに広げたいのですが、
現状ですと、コンテンツ（文字の数）の分しかwidthが認識されません。
どのようにすると、右側のコンテンツが、右側端いっぱいまで広がるのでしょうか。
お力を貸していただければ幸いです。

<div id="container">
    <div id="main">
        
        <div id="contents">
            <section class="mb-adjust">
                <div class="summary">
                    <div class="company">
                        <div class="company_flex_wrapper">
                        <img src="test.jpg" alt="">
                        </div>
                        <div class="company_flex_wrapper_right">
                        <dl>
                            <dt>名 称：</dt>
                            <dd>テスト</dd>
                            <dt>住 所：</dt>
                            <dd>テスト</dd>
                            <dt>ホームページ：</dt>
                            <dd><a href="#" target="_blank" class="text__underline link__color__orange">URL</a>
                            </dd>
                        </dl>
                            <table class="case_info">
                                <tbody><tr>
                                    <th>業種</th>
                                    <td>不動産</td>
                                </tr>
                                <tr>
                                    <th>課題</th>
                                    <td>テスト</td>
                                </tr>
                            </tbody></table>
                        </div>
                    </div>
                </div>
            </section>                
        </div>
    </div>
</div>

@charset "UTF-8";
img {
    width: 100%;
}
#main #contents .content {
    padding: 60px 0;
}
.figure img {
    width: 100%;
    height: auto;
}
#main #contents .summary .company {
    padding: 40px;
    border: 1px #ea8729 solid;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#main #contents .summary .company dl {
    margin-left: 30px;
    font-size: 15px;
    line-height: 30px;
    word-break: break-word;
}
#main #contents .summary .company dl dt {
    float: left;
    color: #ea8729;
    font-weight: bold;
}

#main #contents .summary .company dl dd {
    margin-left: 105px;
}
#main #contents .summary .company dl dd:after {
    content: "";
    display: block;
    clear: both;
}

#main #contents .summary .company dl div {
    margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
    #main #contents .summary .company .company_flex_wrapper:first-child img {
        width: 100%;
    }
}

.company_flex_wrapper {
    width: 30%;
}
.company_flex_wrapper img {
    width: 100%;
    height:auto;
}
.company_flex_wrapper_right {
    width: 70%;
}
@media only screen and (max-width: 767px) {
    #main #contents .summary .company img {
        width: 100%;
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 768px) {
    #main #contents .summary .company .company_flex_wrapper:first-child img {
        width: 100%;
    }
}
.case_info {
    display: block;
    margin-top: 20px;
    margin-left: 30px;
    font-size: 15px;
}
.case_info th,
.case_info td {
    padding: 5px 10px;
}
.case_info th {
    background: #ffe4cb;
    text-align: center;
    color: #e17e39;
    font-weight: bold;
    width: 100px;
}
.case_info td {
    background: #f5f5f5;
}
section.mb-adjust {
    margin-bottom: -40px;
}
}

Answer 1

ざっとですが、こんな感じでしょうか？

.company_flex_wrapper_right {flex:1 1 auto;}

Comments

[vankick]

ご回答ありがとうございます。
上記のコードでは、何も変化がありませんでした。

[madone99]

画像の.company_flex_wrapperにも、flex:1 1 auto;を追加するとどうですか？