OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Html/css flex: Preventing element from overflowing browser window

  • Thread starter Thread starter Kyle Malling
  • Start date Start date
K

Kyle Malling

Guest
I'm trying to make a segment of a webpage where an image will appear on the left or right and directly next to it there can be text centered on its segment of the page (see image). However, the element holding the text is wider than the available space for it because its defaulting to the width of the entire page despite being slightly to the right, causing the text to be off-center.

Is there a way to account for the variable width of the image without this overflow?

Here are the HTML and CSS snippets for the elements I'm using and a photo of the issue:

HTML

Code:
<div class="row" style="max-height: 80%">
    <img src="./images/garden-state.webp">

    <div class="column" style="width:min-content;">
        <div class="title" style="background-color: #1b1b1b; max-height: 30%;"><h3>Garden State</h3></div>
    </div>
</div>

CSS

Code:
.row {
    display: flex;
    flex:0 0 100%;
    max-height:80%;
    width:100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex:0 0 100%;
    justify-items: center;
    max-height:50%;
    width:100%;
    
}

img {
    display:flex;
    margin: 0;
    padding: 0;
    object-fit: contain;
}



Ideally the text should be horizontally centered in the visible portion of the header element. I've tried multiple different values for the width variable, from different percentages to min-content and the such with nothing changing at all.

Any help is appreciated!
<p>I'm trying to make a segment of a webpage where an image will appear on the left or right and directly next to it there can be text centered on its segment of the page (see image).
However, the element holding the text is wider than the available space for it because its defaulting to the width of the entire page despite being slightly to the right, causing the text to be off-center.</p>
<p>Is there a way to account for the variable width of the image without this overflow?</p>
<p>Here are the HTML and CSS snippets for the elements I'm using and a photo of the issue:</p>
<p><strong>HTML</strong></p>
<pre><code><div class="row" style="max-height: 80%">
<img src="./images/garden-state.webp">

<div class="column" style="width:min-content;">
<div class="title" style="background-color: #1b1b1b; max-height: 30%;"><h3>Garden State</h3></div>
</div>
</div>
</code></pre>
<p><strong>CSS</strong></p>
<pre><code>.row {
display: flex;
flex:0 0 100%;
max-height:80%;
width:100%;
}

.column {
display: flex;
flex-direction: column;
flex:0 0 100%;
justify-items: center;
max-height:50%;
width:100%;

}

img {
display:flex;
margin: 0;
padding: 0;
object-fit: contain;
}

</code></pre>
<p><a href="https://i.sstatic.net/MBsuFzOp.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MBsuFzOp.png" alt="" /></a></p>
<p>Ideally the text should be horizontally centered in the visible portion of the header element. I've tried multiple different values for the <code>width</code> variable, from different percentages to <code>min-content</code> and the such with nothing changing at all.</p>
<p>Any help is appreciated!</p>
Continue reading...
 
Top