Home>
Assumptions

A text area is placed in the middle of the modal.

The point is that even if "text area height>screen height" is reached, the text area position remains in the middle and "padding: 50 0;" is provided above and below. is.

In this premise, I want to fix the "x button" on the upper right.

Problem i am experiencing

The "x button" cannot be fixed to the upper right.
The corresponding CSS is hidden by scrolling.

CSS of interest

The image code above is below.

Same but sample ( https://jsfiddle.net/e0n23u7q/ ) There is also.


    
      <button type = "button">✕</button>
    
    
      
          
      
    
. modal {
    position: fixed;
    top: 0;right: 0;bottom: 0;left: 0;
    width: 100vw;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden scroll;
    background: green;
}
.close_modal {
    position: absolute;
    top: 0;
    right: 0;
}
.outer {
    position: relative;
    width: 200px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.inner {
    width: 200px;
    min-height: 100px;
    padding: 50px 0;
    margin: 0 auto;
}
.editable {
    width: 200px;
    min-height: 100px;
    background: palegreen;
    white-space: pre-wrap;
}

First I tried the familiar "position: sticky;". The following additions.

However, the "display: flex;" of the ".modal" on the outside works, and the "× button" is aligned with the text area.

/* Add to the corresponding CSS * /
.close_modal {
    position: sticky;
}
.close_modal>button {
    position: absolute;
    right: 0;
}


The idea was to set "flex-direction: column;" to "display: flex;" in ".modal" if it would be side by side.

/* Add more * /
.modal {
    flex-direction: column;/* Horizontally align vertically * /
    align-items: end;/* "X button" from middle to right * /
}


However, with this, when "text area height>screen height", the position of the text area could not be maintained in the middle, and the assumption could not be cleared.

I also came up with changing the "flex" property used to place the text area in the middle to the "transform" property. (The button will still be set to "sticky" as before)

/* Remove flex property from the corresponding CSS * /
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    / * display: flex;* /
    / * align-items: center;* /
    / * justify-content: center;* /
    overflow: hidden scroll;
    background: green;
}
/ * Add the following to the relevant CSS * /
.outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY (-50%) translateX (-50%);
}
.close_modal {
    position: sticky;
}
.close_modal>button {
    position: absolute;
    right: 0;
}


However, this is also the same as when "flex-direction: column;", and if "text area height>screen height" is satisfied, the text area position cannot be maintained in the middle and the assumption is cleared. I could not do it.

The above is the flow of thinking and trying to solve.

I would appreciate any advice from someone with a deep knowledge of CSS.

  • Answer # 1

    By using sticky after setting the

    flex-directionproperty tocolumnConfirmation link).

    
        
          
        
        
          
              
          
        
    
    . modal {
        position: fixed;
        top: 0;right: 0;bottom: 0;left: 0;
        width: 100vw;
        z-index: 100;
        display: flex;
        flex-direction: column;/* Add * /
        overflow: hidden scroll;
        background: green;
    }
    .close_modal {
        position: sticky;/* change * /
        top: 0;
        height: 0;/* add * /
        text-align: right;/* Add * /
    }
    .outer {
        position: relative;
        width: 200px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    .inner {
        width: 200px;
        min-height: 100px;
        padding: 50px 0;
        margin: 0 auto;
    }
    .editable {
        width: 200px;
        min-height: 100px;
        background: palegreen;
        white-space: pre-wrap;
    }