Flex 子项在非常小的宽度上消失

Question

我正在使用 ReactJS 构建一个调整大小的组件。 代码如下：

 class Cell extends React.Component { handleMouseDown = event => { this.props.onMouseDown(this.props.index, event); }; render() { let verticalGrip = ( < div onMouseDown = { this.handleMouseDown } className = "cell-vertical-grip" / > ); return ( < div className = "cell-container" style = { { width: this.props.widths[this.props.index] } } > < div className = "cell-content" style = { { border: "10px solid transparent" } } > { "WIDTH " + this.props.widths[this.props.index] } < /div> { verticalGrip } < /div> ); } } class Test extends React.Component { state = { widths: [100, 100, 100, 100], baseWidths: [100, 100, 100, 100], xBase: 0, resizeIndex: null }; handleMouseDown = (index, event) => { console.log("MouseDown: index: " + index + ", pageX: " + event.pageX); this.setState({ xBase: event.pageX, resizing: true, resizeIndex: index }); }; handleMouseMove = event => { if (this.state.resizing) { let delta = this.state.xBase - event.pageX; console.log("MouseMove " + delta); let widths = this.state.widths.slice(); widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta; this.setState({ widths: widths }); } }; handleMouseUp = event => { console.log("MouseUp"); this.setState({ resizing: false, resizeIndex: null }); }; render() { return ( < div className = "test-container" onMouseMove = { this.handleMouseMove } onMouseUp = { this.handleMouseUp } > < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 0 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 1 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 2 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 3 } /> < /div> ); } } // Render it ReactDOM.render( < Test / > , document.body );

 .test-container { width: 100vw; height: 100vh; display: flex; flex-direction: row; background-color: cyan; } .cell-container { width: 100%; height: 100px; display: flex; flex-direction: row; background-color: grey; border: 1px solid black; overflow-y: hidden; overflow-x: hidden; } .cell-content { align-self: center; flex-shrink: 1; font-size: 12px; overflow-y: hidden; overflow-x: hidden; background-color: white; } .cell-vertical-grip { flex-shrink: 0; margin-left: auto; width: 3px; min-width: 3px; cursor: ew-resize; background-color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

verticalGrip是您抓取列以调整大小的地方。

一切都很好，但是当我将任何列的大小调整为小于20px宽度时，我的问题就会出现。 在那种情况下，我的蓝色手柄（ verticalGrip项目）就会消失。 因此，如果我在该位置释放鼠标，我将无法再次展开该列，因为没有抓地力（它已消失）。

换句话说，如果他因为某种原因需要缩小一个柱子，他就无法再次增长，因为没有抓地力。

我怎样才能在每个可能的宽度上保持我的抓地力，允许用户在任何情况下调整列的大小？

Answer 1

一种想法是使您的元素在右侧具有粘性，并且当由于您应用于元素的边框而出现溢出时，它不会消失。

 class Cell extends React.Component { handleMouseDown = event => { this.props.onMouseDown(this.props.index, event); }; render() { let verticalGrip = ( < div onMouseDown = { this.handleMouseDown } className = "cell-vertical-grip" / > ); return ( < div className = "cell-container" style = { { width: this.props.widths[this.props.index] } } > < div className = "cell-content" style = { { border: "10px solid transparent" } } > { "WIDTH " + this.props.widths[this.props.index] } < /div> { verticalGrip } < /div> ); } } class Test extends React.Component { state = { widths: [100, 100, 100, 100], baseWidths: [100, 100, 100, 100], xBase: 0, resizeIndex: null }; handleMouseDown = (index, event) => { console.log("MouseDown: index: " + index + ", pageX: " + event.pageX); this.setState({ xBase: event.pageX, resizing: true, resizeIndex: index }); }; handleMouseMove = event => { if (this.state.resizing) { let delta = this.state.xBase - event.pageX; console.log("MouseMove " + delta); let widths = this.state.widths.slice(); widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta; this.setState({ widths: widths }); } }; handleMouseUp = event => { console.log("MouseUp"); this.setState({ resizing: false, resizeIndex: null }); }; render() { return ( < div className = "test-container" onMouseMove = { this.handleMouseMove } onMouseUp = { this.handleMouseUp } > < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 0 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 1 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 2 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 3 } /> < /div> ); } } // Render it ReactDOM.render( < Test / > , document.body );

 .test-container { width: 100vw; height: 100vh; display: flex; flex-direction: row; background-color: cyan; } .cell-container { width: 100%; height: 100px; display: flex; flex-direction: row; background-color: grey; border: 1px solid black; overflow-y: hidden; overflow-x: hidden; } .cell-content { align-self: center; flex-shrink: 1; font-size: 12px; overflow-y: hidden; overflow-x: hidden; background-color: white; } .cell-vertical-grip { flex-shrink: 0; margin-left: auto; width: 3px; min-width: 3px; cursor: ew-resize; background-color: blue; position:sticky; right:0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

或者你可以考虑另一个想法而不是像轮廓或框阴影这样的边框，它们不会影响元素的宽度，并且你将拥有相同的视觉输出：

 class Cell extends React.Component { handleMouseDown = event => { this.props.onMouseDown(this.props.index, event); }; render() { let verticalGrip = ( < div onMouseDown = { this.handleMouseDown } className = "cell-vertical-grip" / > ); return ( < div className = "cell-container" style = { { width: this.props.widths[this.props.index] } } > < div className = "cell-content" style = { { outline: "10px solid #fff" } } > { "WIDTH " + this.props.widths[this.props.index] } < /div> { verticalGrip } < /div> ); } } class Test extends React.Component { state = { widths: [100, 100, 100, 100], baseWidths: [100, 100, 100, 100], xBase: 0, resizeIndex: null }; handleMouseDown = (index, event) => { console.log("MouseDown: index: " + index + ", pageX: " + event.pageX); this.setState({ xBase: event.pageX, resizing: true, resizeIndex: index }); }; handleMouseMove = event => { if (this.state.resizing) { let delta = this.state.xBase - event.pageX; console.log("MouseMove " + delta); let widths = this.state.widths.slice(); widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta; this.setState({ widths: widths }); } }; handleMouseUp = event => { console.log("MouseUp"); this.setState({ resizing: false, resizeIndex: null }); }; render() { return ( < div className = "test-container" onMouseMove = { this.handleMouseMove } onMouseUp = { this.handleMouseUp } > < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 0 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 1 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 2 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 3 } /> < /div> ); } } // Render it ReactDOM.render( < Test / > , document.body );

 .test-container { width: 100vw; height: 100vh; display: flex; flex-direction: row; background-color: cyan; } .cell-container { width: 100%; height: 100px; display: flex; flex-direction: row; background-color: grey; border: 1px solid black; overflow-y: hidden; overflow-x: hidden; } /*to push the element so we can see the outline*/ .cell-container:before { content:""; width:10px; } .cell-content { align-self: center; flex-shrink: 1; font-size: 12px; overflow-y: hidden; overflow-x: hidden; background-color: white; } .cell-vertical-grip { flex-shrink: 0; margin-left: auto; width: 3px; min-width: 3px; cursor: ew-resize; background-color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

一个简单的解决方案可能是稍微修改您的 CSS，以便您的抓手元素定位为absolute 、对齐和大小到父.cell-container的右边缘和高度：

.cell-vertical-grip {
  /* Add this */
  position:absolute;
  top:0;
  height:100%;
  right:0;
}

您还可以明确设置.cell-container的min-width以匹配夹具宽度，以便在容器完全折叠时它仍然可见：

.cell-container {
  /* Add this */
  min-width:3px;
  position:relative;
}

我已经使用以下代码段中的这些更改更新了您的代码：

 class Cell extends React.Component { handleMouseDown = event => { this.props.onMouseDown(this.props.index, event); }; render() { let verticalGrip = ( < div onMouseDown = { this.handleMouseDown } className = "cell-vertical-grip" / > ); return ( < div className = "cell-container" style = { { width: this.props.widths[this.props.index] } } > < div className = "cell-content" style = { { border: "10px solid transparent" } } > { "WIDTH " + this.props.widths[this.props.index] } < /div> { verticalGrip } < /div> ); } } class Test extends React.Component { state = { widths: [100, 100, 100, 100], baseWidths: [100, 100, 100, 100], xBase: 0, resizeIndex: null }; handleMouseDown = (index, event) => { console.log("MouseDown: index: " + index + ", pageX: " + event.pageX); this.setState({ xBase: event.pageX, resizing: true, resizeIndex: index }); }; handleMouseMove = event => { if (this.state.resizing) { let delta = this.state.xBase - event.pageX; console.log("MouseMove " + delta); let widths = this.state.widths.slice(); widths[this.state.resizeIndex] = this.state.baseWidths[this.state.resizeIndex] - delta; this.setState({ widths: widths }); } }; handleMouseUp = event => { console.log("MouseUp"); this.setState({ resizing: false, resizeIndex: null }); }; render() { return ( < div className = "test-container" onMouseMove = { this.handleMouseMove } onMouseUp = { this.handleMouseUp } > < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 0 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 1 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 2 } /> < Cell widths = { this.state.widths } onMouseDown = { this.handleMouseDown } index = { 3 } /> < /div> ); } } // Render it ReactDOM.render( < Test / > , document.body );

 .test-container { width: 100vw; height: 100vh; display: flex; flex-direction: row; background-color: cyan; } .cell-container { width: 100%; height: 100px; display: flex; flex-direction: row; background-color: grey; border: 1px solid black; overflow-y: hidden; overflow-x: hidden; /* Add this */ min-width:3px; position:relative; } .cell-content { align-self: center; flex-shrink: 1; font-size: 12px; overflow-y: hidden; overflow-x: hidden; background-color: white; } .cell-vertical-grip { flex-shrink: 0; margin-left: auto; width: 3px; min-width: 3px; cursor: ew-resize; background-color: blue; /* Add this */ position:absolute; top:0; height:100%; right:0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>