I want to add scroll outside of the container but instead of scrolling the whole container i want to scroll the image alone as the image is getting cut. These are the css properties added so far

due to fixed height image is getting cut but if i add overflow:auto i am getting scroll inside the container but i don't want that.

.c-output-modal__img-container {
    width: 100%;
    height: 390px;
}
.c-output-modal__img-container img {
    width: 100%;
}
 .-modal {
      display: none;
      position: fixed;
      z-index: 8888;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: #eee;
    }
    .c-output-modal__wrapper {
    max-width: 945px;
    margin: 50px auto 20px;
    position: relative;
}
.c-output-modal {
    background-color: rgba(0, 0, 0, 0.1);
}
.c-output-modal__content {
    background-color: #f4f4f5;
    padding: 40px 70px;
    min-height: 523px;
    border-top: 1px solid #e7e0ea63;
    position: relative;
    display: flex;
    flex-direction: column;
}
.c-output-modal__header-content {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    margin: 0 0 25px;
}
.c-output-modal__carousel {
    width: calc(100%   10px);
    margin: auto;
    position: relative;
    right: 10px;
}

<div class="c-output-modal -modal" id="output-modal">
    <div class="c-output-modal__wrapper">
        <div class="c-output-modal__content">
            <div class="c-output-modal__header-content">
                <h5 class="c-output-modal__title">
                    Key Operating Metrics
                </h5>
                <a class="c-output-modal__close -close" href="javascript:void(0)" title=""><i class="icon-x"></i></a>
            </div>
            <div class="c-output-modal__carousel-wrapper">
                <div id="output-modal-carousel" class="c-output-modal__carousel output-modal-carousel">
                    <div class="c-output-modal__output-item carousel-item">
                        <div class="c-output-modal__img-container">
                            <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

May be there is a padding on .c-output-modal__img-container If that is the case, you must calculate the width and the height fort .-modal like this

.-modal {
      display: none;
      position: fixed;
      z-index: 8888;
      left: 0;
      top: 0;
      width: calc(100% - 40px); //if the padding left and right of the parent is 20px
      height: calc(100% - 60px); //if the padding top and bottom of the parent is 30px
      overflow: auto;
      background-color: #eee;
    }

CodePudding user response：

How about using iframe tag for this problem?

.container{
width: 100%;
height: 60vh;
}

<div>
<h1>Scroll for more information</h1>
<iframe class = "container"  src="https://www.researchgate.net/publication/340708562/figure/fig2/AS:881327033290753@1587136147644/Open-source-DL-research-libraries-with-major-programming-languages-including-Python-C.png" title="programming languages"></iframe>
<div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

    .c-output-modal__img-container {
  float: left;
  min-height: 100px;
}

I solved the issue by adding this properties to the container holding image